webpack.config.js parameter use case

This time I will bring you a usage case of webpack.config.js parameters. What are the precautions when 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()
 ]
};

1.entry

entry can be a string or 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 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'

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

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

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

推荐阅读：

构建项目时本地ip无法访问处理方法

vue-cli+webpack创建项目报错

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