Webpack Configuring Learning Notes

The simplest webpack configuration

ConstPath = require ('Path') Module.exports={entry:'./app/index.js',//Entry Fileoutput: {path:path.resolve (__dirname,'Build'),//must use absolute address, output folderFileName"Bundle.js" //filename of the output file after packaging    }}

Webpack command Configuration

Add code to Package.json

" Scripts " : {   "build""webpack",} 

You can then use npm Run build to start Webpack for packaging

Auto Refresh webpack-dev-server

NPM Install Webpack-dev-server--save-dev

Modify the package.json file

" Scripts " : {   "build""webpack",    " Dev " " Webpack-dev-server--open "  }

Executing the npm run Dev command starts the service, waits for the compilation to complete and automatically opens the Index.html page in the browser

Loader

Babel: Compile the ES6 code, you can use the ES6 directly in the project, the library needs to be installed as follows

NPM i--save-dev babel-loader babel-core babel-preset-env

• Babel-loader is used to let Webpack know how to run Babel
• Babel-core can be seen as a compiler, a library that knows how to parse code
• Babel-preset-env This library can convert code according to the different environment

To add a configuration in Webpack:

Module.exports = {  //  ...   module: {    rules: [      {        //  Specify JS files need to use Babel        '  Babel-loader'//  use which Babel        '/node_modules  '//  does not contain a path       }   ]     }

Configuring Babel, adding . BABELRC Files

{  "presets": ["babel-preset-env"]}

Working with CSS files css-loader style-loader

NPM Install Css-loader Style-loader--save-dev

To add a configuration:

module: {    rules: [      {        /\.css$/, use        : ['style-loader' // insert CSS into the page's Style tab          ' Css-loader ' // working with URLs () in CSS files, etc.           options: {            true          }        }]      }    ],  },

This way, CSS will be packaged in the bundle file with JS, but if the CSS code a lot, it will cause the JS file becomes very complex and large, so you can use extract-text-webpack-plugin to the CSS sheet Package as a file alone

Installation

NPM I--save-dev extract-text-webpack-plugin

Webpack Configuration

ConstExtracttextplugin = require ("Extract-text-webpack-plugin") Module.exports= {    // ....module: {rules: [{test:/\.css$/, Use:ExtractTextPlugin.extract ({fallback:'Style-loader', use:'Css-loader'            })        }       ],    },    //Plugin listplugins: [//file path for output      NewExtracttextplugin ("Css/[name]. [Hash].css")    ]  }

Run NPM run Dev again to find that the CSS files are packaged separately

Automatic introduction of packaged files in the page:html-webpack-plugin

NPM Install Html-webpack-plugin--save-dev

Webpack configuration:

Const Htmlwebpackplugin = require (' Html-webpack-plugin ')
Module.exports = {    //...   plugins: [    new  htmlwebpackplugin ()  ]};

This will automatically be the project directory under the index.html as a template, after packaging to actively introduce packaged files in the page, and the target address (build) to generate a new index.html file, the effect is as follows

Can be configured in the Htmlwebpackplugin () method, the specific configuration items can be referenced

Https://www.npmjs.com/package/html-webpack-plugin

1190000007294861

It is important to note that Htmlwebpackplugin only takes effect through the NPM run Build (webpack) command, which is useless when using the NPM run dev (webpack-dev-server--open) command.

Webpack Configuring Learning Notes