webpack-- front-end automation tools

First, download and install

// global installation webpack (not recommended) 
npm i webpack - G 
npm i webpack the -cli -g

 // local installation (recommended) 
npm i webpack -D 
npm i webpack-cli - D 

NPX webpack -v view webpack version

 Note : You can also use cnpm installation.

Second, the configuration file webpack.config.js

// webpack configuration file, the file name can not be changed! ! ! 
// in case it wants to change is the --config behind webpack.con.js npx wenpack is changed name 
const = path the require ( 'path')   // incorporated purpose of this module is that the configuration file entry and file export root path; 
module.exports = {
     // 'development' or 'production' development environment configuration, the first one is the development environment, the production environment production! ! 
    the MODE: "Development" ,  

      devtool: 'cheap-eval-source-map', // map error

    // configure the default file export / import documents 
    // First find the entrance documents; 
   entry: {    // entry entry file, a file entry, then a direct write, do not write the main target; 
        main: path.join (__ dirname, '/ index. .js' ) 
    }, 
    // export file; 
    Output: { 
        filename: 'bundle.js',   // the name of the file export, free; 
        path: path.join (__ dirname,'. / dist ' ) 
    }, 
    // Module1 - module parses, webpack known only as JS 
    module: {
         rules: [{
             // regular expression matching 
            the Test: / \ CSS $ /. , 
            use: [
                 "style-Loader",   // parsing;
                "css-Loader"     // parse the file dependent; css as there may be a plurality of files 
            ] 
        }, 
        { 
            Test: /\.styl$/,     // configuration file styl; CNPM Loader I Stylus Stylus -D- 
            use: [
                 "style-Loader" ,
                 "CSS-Loader" ,
                 "Stylus-Loader",   // parsed into normal CSS; 
                // Note that the order of the law, from the bottom up; not indiscriminately; 
            ] 
        }, 
        // image is parsed; 
        { 
            Test: /\.(jpg|png|svg|gif|jpeg)$/ , 
            use: [ 
                { 
                    Loader: "url-Loader"   ,    // parse and parsing image files; 
                    // CNPM I-Loader File URL Loader -D- 
                    // URL Loader-Loader -D-Based File 
                    Options: {     // images CI 
                        limit: 10240 // used to control the current size of the file, if the file size exceeds the size of the current file set, the file will generate a new file into the dist, if lower than the current set small, it will be packaged into a file, bit to bate64 form;                     } 
                } 
            ] 
        } 
    ] 
    } 
} Note: css-loader style-loader which are to be installed

 Three, ES6 turn ES5 (babel Chinese document) set ---- webpack

the require path = const ( 'path' );
 // introduced HTML widget; 
const = HtmlWebPackplugin the require ( 'HTML-WebPACK-plugin') 
// download: the install --save NPM-dev-HTML-WebPACK plugin 
const} = {CleanWebpackPlugin the require ( 'Clean-WebPACK-plugin') 
// Download: cnpm i clean-webpack-plugin -D will change as WebPACK version, configuration will change. 
= module.exports { 
    MODE: 'Development' , 
    DevTools: 'the eval-Cheap-Source-Map',   // map error 
    entry: { 
        main: path.join (__ dirname, 'The index.js' ), 
    }, 
    Output: { 
        filename: 'es6.js' , 
        path: path.join (__ dirname,'./dist' ), 
    }, 
    // module parses; 
    Module1: { 
        the rules: [ 
            { 
                Test: /\.css$/ , 
                use: [
                     "style-Loader" ,
                     "CSS-Loader" 
                ] 
            }, 
　　// ES6 switch ES5
    // installation: npm install --save-dev babel-  loader @ babel / core

     //npm install @babel/preset-env --save-dev

     // npm install --save @ babel / polyfill completely converted to ES5; .babelrc need to build a separate file in the root directory of the file, see four arranged, in the final entry file: introducing the need to require (e.g. The index.js) ( "@ babel / polyfill"); // where they need to turn on the introduction where! !

            { 
                Test: /\.js$/ , 
                the exclude: / the node_modules / , 
                Loader: "Babel-Loader" 
            } 
        ] 
    }, 
    // plug, is an array. 
    plugins: [
         new new HtmlWebPackplugin ({ 
            Template: "./index.html"   // according to the HTML file as a template, you write that in this file 
        }),
         new new CleanWebpackPlugin ()
         // Note plug-order! ! ! Can not be changed; 
    ] 
}

 Fourth, the configuration file .babelrc

{
     "Presets": [[ "@ Babel / the env-PRESET" , {
         "useBuiltIns": "Usage"    // where there used to turn; 
    }]] 
  } 
is copied directly to the file which can!