Webpack2 using ch1-Directory description

1 Catalogue Interpretation

Webpack.config.js: Configuration file, configuration file can be changed to other name, but Package.json--config file name also corresponding modification

2 Webpack.config.js

// webpack config file const Webpack = require (' Webpack '),      = require (' path '); // Export module Common.js syntax module.exports = {    // package ingress    // output         path:path.resolve (__dirname, './dist/js '),        // file name after packaging    }};

3 Package.json

"Scripts" is configured with a shortcut key "Webpack" value is the operation of this shortcut key

Run $ cnpm Run Webpack

4 after running./dist/js/bundle.js generate this file

5 CSS style usage notes

5.1 Installing the Dependent modules

5.2 page loading. css files

5.3 Command to load processing of. css files

or use require ("style-loader!css-loader!. /src/css/sytyle.css ") At this time the command is: Webpack hello.js hello.bundle.js

6--watch indicates listening file modification, automatic Update after file modification, automatic packaging

--progress can see the packaging process

--display-modules Viewing packaged Modules

--display-reasons explain why these modules are packaged

Webpack2 using ch1-Directory description