diff --git a/modular_js/webpack.md b/modular_js/webpack.md index 7d17a89..f4a51e9 100644 --- a/modular_js/webpack.md +++ b/modular_js/webpack.md @@ -21,6 +21,8 @@ npm init npm install webpack --save-dev ``` +If you're asked, install `webpack-cli` as well. + Create a test file: ``` @@ -167,7 +169,7 @@ Create `webpack.config.js` to simplify the terminal command module.exports = { entry: './js/index.js', output: { - filename: 'bundle.js' + filename: 'dist/bundle.js' } }; ``` @@ -206,7 +208,7 @@ Modify the webpack config to use these: module.exports = { entry: './js/index.js', output: { - filename: 'bundle.js' + filename: 'dist/bundle.js' }, module: { rules: [ @@ -234,7 +236,7 @@ class Foo { } ``` -The result in `dist/build.js` is the ES5 version (may be minified): +The result in `dist/build.js` is the ES5 version: ```javascript var Foo = function () { @@ -335,30 +337,3 @@ and it will open up your browser automatically. Change a file, and see it reloa ``` rm -r dist ``` - -Change your script tag to be - -```html - -``` - -And take out the `output` property in webpack.config.js - -```javascript -module.exports = { - entry: './js/index.js', - module: { - rules: [ - { - test: /\.(js|jsx)$/, //for all files that end with js/jsx - use: { - loader: 'babel-loader', //use the babel loader to load: - options: { - presets: ["es2015", "react"] //the es2015 compiler - } - } - } - ] - } -}; -```