Entrance
The entry is to specify which module (js file) webpack uses as the start of building its internal dependency graph. After entering the entry, webpack will find out which modules and libraries are directly or indirectly dependent on the entry file
- Create
webpack.config.js
module.exports = {<!-- -->
//entry file
entry: './src.main.js'
}
Export
The export attribute tells webpack where to output the bundles it creates, and how to name these files. The default value for the main output file is ./dist/main.js, and other generated files are placed by default in ./dist folder. **
//The export file path needs to use the node built-in module path to obtain the path
const path = require('path')
module.exports = {<!-- -->
//Export File
output:{<!-- -->
filename:'bundle.js',
path:path.resolve(__dirname,'./build')
}
}
Configuration file alias
By default webpack will look for webpack.config.js in the root directory, if not found, use the default configuration of webpack, we can do it in package.json Alias configuration
"build":"webpack --config.js awei.config.js"
loader
The loader can be used to convert the source code of the module. We can also regard the css file as a module. We load this module through import. When loading this module, webpack actually does not know how to process it. To load it, for example, we specify the corresponding loader to complete this function
-
css-loader
npm install css-loader -D
const path = require('path')
module.exports = {<!-- -->
//Export File
output:{<!-- -->
filename:'bundle.js',
path:path.resolve(__dirname,'./build')
},
module:{<!-- -->
rules:[
{<!-- -->
test:/.css$/,
use:[
{<!-- -->
loader: 'css-loader'
}
]
}
]
}
}
-
style-loader
npm install style-loader -D
const path = require('path')
module.exports = {
//Export File
output: {
filename:'bundle.js',
path:path.resolve(__dirname,'./build')
},
module: {
rules:[
//loader application order is from bottom to top
{
test:/.css$/,
use:[
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
}
]
}
}
-
less-loader
npm i less less-loader -D
const path = require('path')
module.exports = {<!-- -->
//Export File
output:{<!-- -->
filename:'bundle.js',
path:path.resolve(__dirname,'./build')
},
module:{<!-- -->
rules:[
//loader application order is from bottom to top
{<!-- -->
test:/.less$/,
use:[
{<!-- -->
loader: 'style-loader'
},
{<!-- -->
loader: 'css-loader'
},
{<!-- -->
loader: 'less-loader'
}
]
}
]
}
}
-
Browserslist
It is a configuration to share the target browser and node.js version between different front-end tools; such as Autoprefixer, Babel, etc.
- configuration method
Configuration in
1.package.json
{<!-- -->
"browserlist":[
">1%",
"last 2 version",
"not dead"
]
}
2. Configuration file configuration
//Create a .browserslistrc file in the root directory
>1% //Indicates that it is a version with a user ratio greater than 1%
last 2 version //Represents the last two versions of the browser update
not dead //Indicates that there is an updated browser within 24 months
Note: All data is judged based on `caniuse-lite` plug-in query `https://caniuse.com/usage-table` data as a standard
-
postcss
- postcss is a tool for converting styles through javascript; this tool can help us perform some CSS conversion and adaptation, such as automatically adding browser prefixes and resetting CSS styles; but to achieve these functions, we need to use The plug-in corresponding to postcss;
-
Use the steps to add the browser prefix autoprefixer as an example
npm i postcss-loader postcss autoprefixer -D
const path = require('path')
module.exports = {<!-- -->
//Export File
output:{<!-- -->
filename:'bundle.js',
path:path.resolve(__dirname,'./build')
},
module:{<!-- -->
rules:[
//loader application order is from bottom to top
{<!-- -->
test:/.css$/,
use:[
{<!-- -->
loader: 'style-loader'
},
{<!-- -->
loader: 'css-loader'
},
{<!-- -->
loader: 'postcss-loader',
options:{<!-- -->
postcssOptions: {<!-- -->
plugins:[
'autoprefixer'
]
}
}
}
]
}
]
}
}
Note: If we change the .browserslistrc file configuration, the corresponding packaged browser prefix will also change accordingly
-
Using steps take postcss-preset-env as an example
npm i postcss-preset-env -D
//postcss-preset-env can convert some modern css features into css recognized by most browsers, such as converting hexadecimal color values to rgba
//And add the required polyfill according to the target browser or runtime environment
//The autoprefixer will also be added automatically, which is equivalent to the built-in autoprefixer
const path = require('path')
module.exports = {<!-- -->
//Export File
output:{<!-- -->
filename:'bundle.js',
path:path.resolve(__dirname,'./build')
},
module:{<!-- -->
rules:[
//loader application order is from bottom to top
{<!-- -->
test:/.css$/,
use:[
{<!-- -->
loader: 'style-loader'
},
{<!-- -->
loader: 'css-loader'
},
{<!-- -->
loader: 'postcss-loader',
options:{<!-- -->
postcssOptions: {<!-- -->
plugins:[
'postcss-preset-env'
]
}
}
}
]
}
]
}
}
- Configuration file mode using postcss
//Create `postcss.config.js` in the root directory
module.exports = {<!-- -->
plugins:[
'postcss-preset-env'
]
}
//In webpack.config.js, you only need to use postcss-loader. When packaging, it will search for postcss.config.js by default
const path = require('path')
module.exports = {<!-- -->
//Export File
output:{<!-- -->
filename:'bundle.js',
path:path.resolve(__dirname,'./build')
},
module:{<!-- -->
rules:[
//loader application order is from bottom to top
{<!-- -->
test:/.css$/,
use:[
{<!-- -->
loader: 'style-loader'
},
{<!-- -->
loader: 'css-loader'
},
{<!-- -->
loader: 'postcss-loader',
}
]
}
]
}
}
-
Sample code
https://gitee.com/weiLZ598/webpack-study.git