webpack
- npm install css-loader style-loader
- webpack -config webpack.custom.config.js
create-react-app (create-react-app” and the future of creating React applications)
ProvidePlugin vs externals? (link)
Example with library from CDN:
<script src="https://code.jquery.com/jquery-git2.min.js"></script> // the artifial module "jquery" exports the global var "jQuery" externals: { jquery: "jQuery" } // inside any module var $ = require("jquery");Example with library included in bundle:
需要自己打包成 plugin <script scr="xxx.js"> </script>，才可以在 js 裡使用。copy `jquery-git2.min.js` to your local filesystem // make "jquery" resolve to your local copy of the library // i. e. through the resolve.alias option resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } } // inside any module var $ = require("jquery");
Illegal import declaration (link)
js 檔加了 import 出錯了
Module build failed: Error: Parse Error: Line 3: Illegal import declaration
at throwError (...
at throwErrorTolerant(...
at parseSourceElement(...
at parseProgramElement(...
...
原來是配置重複了 "jsx-loader", jsx 不能解析 es6 的 import所以報錯。
module: {
loaders: [
{ test: /\.js|jsx$/, exclude: /node_modules/, loader: 'babel-loader', query:{presets:['es2015', 'react']}},
{ test: /\.js$/, loader: 'jsx-loader' }
]
},