ES Module(importとかexportとか)をCommonJS(requireとかmodule.exportsとか)へbabel(transpile)しながらwebpack(bundle)する
5143 ワード
setup
$ npm init -y && touch webpack.config.js
$ npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli
$ npm i -S react react-dom
webpack.config.js
const path = require('path')
module.exports = {
mode: process.env.NODE_ENV || "development",
entry: path.resolve(__dirname, "src", "entry.jsx"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
}
]
}
]
},
resolve: {
extensions: [".js", ".jsx"]
}
};
run
$ ./node_modules/.bin/webpack
Hash: 0e468e72b73aba9ca423
Version: webpack 4.29.0
Time: 2758ms
Built at: 2019-01-27 23:16:49
Asset Size Chunks Chunk Names
bundle.js 860 KiB main [emitted] main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/gl
obal.js 472 bytes {main} [built]
[./src/entry.jsx] 2.65 KiB {main} [built]
+ 11 hidden modules
Author And Source
この問題について(ES Module(importとかexportとか)をCommonJS(requireとかmodule.exportsとか)へbabel(transpile)しながらwebpack(bundle)する), 我々は、より多くの情報をここで見つけました https://qiita.com/lidqqq/items/17b7afa39712f9223794著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .