1. What is Webpack
Webpack is a front-end resource loading/packaging tool. It will perform static analysis based on the dependencies of the modules, and then map these modules to their corresponding static resources.
As we can see from the figure, Webpack can convert a variety of static resources js, css, and less into a static file, reducing page requests. Generate pairs according to the specified rules
Two, Webpack installation
1. Global installation
npm install -g webpack webpack-cli
2. Check the version after installation
webpack -v
3. Initialize the project 1. Create a webpack folder, enter the webpack directory, and execute the command
npm init -y
2. Create the src folder
3. Create common.js under src
exports.info = function (str) {
document.write(str);
}
4. Create utils.js under src
exports.add = function (a, b) {
return a + b;
}
5. Create main.js under src
const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));
Four, JS packaging
1. Create a configuration file webpack.config.js in the webpack directory
The following configuration means: read the content of main.js (entry file) in the src folder in the current project directory, analyze resource dependencies, package related js files, and put the packaged files into the dist folder of the current directory , The packaged js file is named bundle.js
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出文件
}
}
2. Execute compilation commands from the command line
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
You can also configure the npm run command of the project and modify the package.json file
"scripts": {
//...,
"dev": "webpack --mode=development"
}
Run npm command to execute packaging
npm run dev
3. Create index.html in the webpack directory to reference bundle.js
title
<body>
<script src="dist/bundle.js"></script>
</body>
4. View index.html in the browser
CSS packaging
1. Install style-loader and css-loader
Webpack itself can only process JavaScript modules. If you want to process other types of files, you need to use loader for conversion.
Loader can be understood as a converter of modules and resources.
First, we need to install the relevant Loader plug-in, css-loader is to load css into javascript; style-loader is to let javascript know css
npm install --save-dev style-loader css-loader
2. Modify webpack.config.js
const path = require("path"); //Node.js内置模块
module.exports = {
//...,
output:{},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
3. Create style.css in the src folder
body{
background:pink;
}
4. Modify main.js
Introduce style.css in the first line
require('./style.css');
5. View index.html in the browser
See if the background turns to pink?