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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.