webpack.config.js parameter use case-JS Tutorial-php.cn

This time I will bring you a usage case of webpack.config.js parameters. What are theprecautionswhen using webpack.config.js parameters? Here are actual cases, let’s take a look.

The webpack.config.js file is usually placed in the root directory of the project, and it itself 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() ] };

Copy after login

1.entry

entry can be astringor array or object.

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

entry: './js/main.js'

Copy after login

When entry is an array, it also contains the entry js file and another parameter It can be used to configure a static resource server provided by webpack, webpack-dev-server. webpack-dev-server will monitor changes in each file in the project, build it in real time, and automatically refresh the page:

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

Copy after login

When entry is an object, we can build different files into different files , use as needed, for example, just introduce hello.js into my hello page:

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

Copy after login

2.output

output The parameter is an object used to define the output of the built file. It contains path and filename:

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

Copy after login

When we define and build multiple files in the entry, filename can be correspondingly changed to [name].js is used to define the names of different files after they are built.

3.module

Regarding the loading of modules, we define it in module.loaders. Here,regular expressionis used to match file names with different suffixes, and then define different loaders for them. For example, define three loaders in series for less files (! 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'} ] }

Copy after login

In addition, you can also add image resources such as png and jpg to be automatically processed when they are less than 10k Loader for base64 images:

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

Copy after login

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

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

Copy after login

But what you need to know is that the files required in this way will be inlined into the js bundle. If we need to retain the require writing method 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 above example code, we can see a loader called react-hot. My project is used to learn react and write related code, so I configured a react-hot loader, through which the hot replacement of react components can be achieved. 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 to use react-hot-loader. Define it like this in the package.json file:

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

Copy after login

4.resolve

When webpack builds the package, it will sort the files according to the directory. Find, the extensions array in the resolve attribute is used to configure which file suffixes the program can complete by itself:

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

Copy after login

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

6.externals

When we want to require some other class libraries or APIs in the project, but do not want these class libraries The source code is built into runtime files, which is necessary in actual development. At this point we can solve this problem by configuring the externals parameter:

externals: { "jquery": "jQuery" }

Copy after login

So that we can use these APIs in the project with confidence: var jQuery = require("jquery");

7.context

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

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

Copy after login

Then in We cannot know the specific module when compiling. But at this time, webpack will also do some analysis work for us:

1. Analysis directory: './mods';

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

于是这个时候为了更好地配合wenpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：

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

Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！