Detailed configuration of the Webpack.config.js

This article is mainly to share with you webpack.config.js configuration detailed, hope to help everyone,

Webpack can also be executed with the specified configuration file, except when the parameter is passed in at the command line. The default is to search the current directory under Webpack.config.js. This file is a node. JS module that returns a JSON-formatted configuration object, or specifies a configuration file with the--config option. var webpack = require (' Webpack '); module.exports = {entry: './entry.js ',//Portal File//entry can be a string or an array or an object. When entry is a string, it is used to define the entry file://When the entry is a group, it also contains the portal JS file, another parameter can be used to configure Webpack provide a static resource server//, Webpack-dev-server.  Webpack-dev-server will monitor the changes of each file in the project, build it in real time, and automatically refresh the page://ENTRY: [//' webpack/hot/only-dev-server ',//'./js/app.js '// ] output:{//node.js __dirname variable gets the full absolute path of the directory where the current module file resides path:__dirname,//output location filename: ' build.js '//Input file},//O The Utput parameter is an object that defines the output of the built file. It contains path and filename module:{//about the loading of the module, which we define in Module.loaders. This is done by matching the filenames//of different suffixes with regular expressions, and then defining different loaders for them. For example, define three loaders (!) in series for the less file.     Used to define a cascade relationship)://loaders: [///{test:/\.js?$/, loaders: [' React-hot ', ' Babel '], exclude:/node_modules/},//    {test:/\.js$/, exclude:/node_modules/, Loader: ' Babel-loader '},//{test:/\.css$/, Loader: ' Style!css '}, {TEST:/\.less/, Loader: ' Style-loader!css-loader!less-loader '}//] loaders:[{test:/\.css$/,//Support regular Loader: ' Style-loader!css-loader '}]},//Other solution configuration resolve:{//webpack file lookup by directory when building the package//RESOLV The e attribute in the extensions array is used in the configuration program to self-complement which file suffixes extensions:[",". js ', '. json ', '. css ', '. Scss ')//Add the file corresponding to this suffix to omit the suffix,//Then we want to add  When you load a JS file, you can load the Common.js file as long as require (' common '). },//plugin plugins:[new Webpack. Bannerplugin (' This file is the create by Baibai ')]//when we want to require some other class libraries or APIs in the project, and do not want the source of these libraries to be built into the runtime files,//which is necessary in the actual development. At this point we can fix the problem by configuring the Externals parameter:////externals: {//"jquery": "jquery"//}//////so we can safely use these APIs in the project: var jquery = Require ("jquery");}

examples of webpack.config.js:

var htmlwebpackplugin=require (' Html-webpack-plugin ');//automatically generate HTML file var path=require (' path ');//path is built-in Var Webpackdevserver = require (' webpack-dev-server ');//Auto Refresh module//Externally exposed an object module.exports={//Entry:__dirname + "/app/        Index.js ",//package The Ingress file object or string entry:{//package multiple entry files build:__dirname+"/es6/index.js "}, output:{//Configure the package result object     Path:__dirname + "/es6_build/",//define output file path//filename: "Build.js",//Specify Package file name filename: "[name].js"//Specify multiple packaged file names }, module:{//handles the logical array of files loaders:[//the loader is an array, and each item in the array is an object {test:/.css$/,//is a regular, after processing                Prefix file named CSS, matching to the filename suffix//webpack in the packaging process, encountered a suffix of the CSS files, will use Style-loader and css-loader to load the file. loaders:["Style-loader", "Css-loader"],//drop loader, one is a string, two is written as an array//the last calculated CSS, will use Style-loader to generate a content for the final parsing of the CSS code                Style tag, put it in the head tag.                It is important to note that loader is sequential, and Webpack must first parse all CSS module dependencies and then create a style label.    Therefore, the style-loader should be placed in front of the Css-loader (Webpack loader execution order is from right to left).            Exclude: "/node_modules"//folder to exclude}, {test:/.js$/, loaders : ["Babel-loader"],//convert ES6 code to ES5 code exclude: "/node_modules", Include:path.resolve (__dirname , "/es6/")//file to include}]}, devserver:{//Configuration service Hot:true,//enable hot module replacement Inline:true//Automatically refresh page    Use inline mode (add webpack-dev-sever client Portal to package)//This mode supports hot module substitution: The benefit of hot module substitution is to replace only the updated part, not the page reload. }, resolve:{extensions:[", '. js ', '. css ', '. Jsx ')//auto-complete identify suffix}, plugins:[//plug-in can do more loader not complete the function.      The use of plug-ins is typically specified in the Plugins option in Webpack.config.js.        The webpack itself has some common plugins built in, and third-party plugins can be installed via NPM.        New Htmlwebpackplugin ({//auto-generated HTML file title: "Welcome",//title tag for Welcome to this string chunks:["build"]//Referenced module (abc.js) }), new Webpack. Hotmodulereplacementplugin ()//enable Hot module replacement]