Tutorial on using webpack.config.js parameters

This time I will bring you a tutorial on how to use webpack.config.js parameters. What are the precautions for using webpack.config.js parameters? The following is a practical case, 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()
 ]
};

1.entry

entry can be a string, array or object.

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

entry: './js/main.js'

When entry is an array, it also contains the entry js file. Another parameter can be used to configure webpack. Provides a static resource server, 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'

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'
 }

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'
 }

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 expressions are used to match file names with different suffixes, and then different loaders are defined 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'}
 ]
}

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'}

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');

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"
 }

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']
 }

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"
 }

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");

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 the regular expression: '/^.*.js$/';

So at this time, in order to better cooperate with wenpack for compilation, we can give It specifies the path, like done 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);

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

推荐阅读：

如何使用Linux重复加载 .vimrc文件

vue-cli+webpack无法新建项目

The above is the detailed content of Tutorial on using webpack.config.js parameters. For more information, please follow other related articles on the PHP Chinese website!