Files are usually placed in the root directory of the project, and they are themselves a standard Commonjs specification module.
var webpack = require('webpack');
= {
entry: [
'webpack/hot/only-dev-server',
'./js/'
],
output: {
path: './build',
filename: ''
},
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 ()
]
};
An entry can be a string, an array, or an object.
When entry is a string, it is used to define the entry file:
entry: './js/'
When entry is an array, it also contains the entry js file. Another parameter can be used to configure a static resource server provided by webpack, webpack-dev-server. webpack-dev-server will monitor the changes in each file in the project, build it in real time, and automatically refresh the page:
entry: [ 'webpack/hot/only-dev-server', './js/'
When entry is an object, we can build different files into different files and use them as needed. For example, in my hello page, just import it:
entry: {
hello: './js/',
form: './js/'
}
The output parameter is an object that defines the output of the built file. It contains path and filename:
output: {
path: './build',
filename: ''
}
When we define multiple files to build in entry, filename can be changed to [name].js to define the names after different files are built.
Regarding the loading of modules, we define it in it. Here we use regular expressions to match file names with different suffixes, and then define different loaders for them. For example, define three concatenated loaders for less files (used to define cascade 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 a loader to define image resources such as png and jpg that are automatically processed as base64 images when they are less than 10k:
{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}
After adding a loader to css, less and images, we can not only require js files like in node, but we can also require css, less and even image files:
require('./');
require('./');
var img = ('img');
= require('./');
But it should be known that the required files will be inlined into the js bundle in this way. If we need to write the retain require and want to take out the css file separately, we can use the [extract-text-webpack-plugin] plugin 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 to write related code, so I configured a react-hot loader, through which I can achieve hot replacement of react components. We have configured webpack/hot/only-dev-server in the entry parameter, so we can use react-hot-loader as long as we enable the –hot parameter when starting the webpack development server. Define it in the file as follows:
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
}
When webpack builds a package, it will search files according to the directory. The extensions array in the resolve attribute is used to configure which file suffixes can be completed by the program:
resolve:{
extensions:['','.js','.json']
}
Then when we want to load a js file, we can load the file by requiring('common').
When we want to require some other class libraries or APIs in our project, but do not want the source code of these class libraries to be built into the runtime file, this is very necessary in actual development. At this time, we can solve this problem by configuring the externals parameter:
externals: {
"jquery": "jQuery"
}
In this way, we can use these APIs in the project with confidence: var jQuery = require("jquery");
When we are requiring a module, if we include variables in the require, like this:
require("./mods/" + name + ".js");
Then we cannot know the specific module when compiling. But at this time, webpack will also do some analysis 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 specify the path to it, as we did in cake-webpack-config (we will ignore the role of abcoption here):
var currentBase = (); var context = ? : (entryDir) ? entryDir : (currentBase, entryDir);
The above detailed explanation of parameters is all the content I share with you. I hope you can give you a reference and I hope you can support me more.