Based on webpack. config. js parameters, webpack. config. js

Based on webpack. config. js parameters, webpack. config. js

The webpack. config. js file is usually stored in the project's root directory. It is also a standard Commonjs specification module.

var webpack = require('webpack');module.exports = { entry: [  'webpack/hot/only-dev-server',  './js/app.js' ], output: {  path: './build',  filename: 'bundle.js' }, module: {  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'}  ] }, resolve:{  extensions:['','.js','.json'] }, plugins: [  new webpack.NoErrorsPlugin() ]};

1. entry

The entry can be a string, an array, or an object.

When the entry is a string, it is used to define the entry file:

entry: './js/main.js'

When the entry is an array, it also contains the entry js file. Another parameter can be used to configure a static resource server webpack-dev-server provided by webpack. Webpack-dev-server monitors the changes of every file in the project, builds the file in real time, and automatically refreshes the page:

entry: [  'webpack/hot/only-dev-server',  './js/app.js'

When the entry is an object, we can build different files into different files and use them as needed. For example, on my hello page, we only need to \ introduce hello. js:

 entry: {  hello: './js/hello.js',  form: './js/form.js' }

2. output

The output parameter is an object used to define the output of the constructed file. Including path and filename:

 output: {  path: './build',  filename: 'bundle.js' }

When we define building multiple files in the entry, the filename can be changed to [name]. js to define the names after building different files.

3. module

The module loading is defined in module. loaders. Here, we use regular expressions to match the file names with different suffixes and then define different loaders for them. For example, define a series of three loaders for the less file (! Used to define cascading relationships ):

module: { 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'} ]}

In addition, you can add a loader that defines image resources such as png and jpg as base64 images when they are smaller than 10 KB:

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

After adding loader to css and less images, we can not only require js files as in node, but also require css, less, and even image files:

 require('./bootstrap.css'); require('./myapp.less'); var img = document.createElement('img'); img.src = require('./glyph.png');

However, you need to know that the files from require will be embedded in the js bundle. If we need to write the require retained statement and want to take out the css file separately, we can use the [extract-text-webpack-plugin] Plug-In mentioned below.

In the first loaders configured in the sample code above, we can see a react-hot loader. My project is used to learn how to write related code in react, so I configured a react-hot loader to implement hot replacement of react components. We have configured webpack/hot/only-dev-server in the entry parameter, so we only need to enable the-hot parameter when starting the webpack development server, you can use react-hot-loader. The package. json file is defined as follows:

"scripts": {  "start": "webpack-dev-server --hot --progress --colors",  "build": "webpack --progress --colors" }

4. resolve

When creating a package, webpack searches for files by directory. In the extensions array in the resolve attribute, which file suffixes can be supplemented by the configuration program:

 resolve:{  extensions:['','.js','.json'] }

Then, when we want to load a js file, we only need require ('common') to load the common. js file.

6. externals

When we want to require some other class libraries or APIs in the project, and do not want the source code of these class libraries to be built into the runtime file, this is necessary in actual development. Now we can solve this problem by configuring the externals parameter:

 externals: {  "jquery": "jQuery" }

In this way, we can safely use these APIs in the project: var jQuery = require ("jquery ");

7. context

When we are in a require module, if we include variables in require, like this:

require("./mods/" + name + ".js");

We cannot know the specific modules during compilation. But at this time, webpack will also do some analysis for us:

1. Analysis Directory: './mods ';

2. Extract the regular expression '/^. *. js $ /';

In this case, we can specify the path for compiling with wenpack, as we did in cake-webpack-config (we ignore the role of abcoption here ):

 var currentBase = process.cwd(); var context = abcOptions.options.context ? abcOptions.options.context :  path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

The above explanation based on webpack. config. js parameters is all the content that I have shared with you. I hope to give you a reference and support for the customer's house.