webpack能根据模块的依赖关系递归地构建一个依赖关系图,当中包含了应用程序所需要的所有模块,最后打包成一个或多个bundle.它有四个核心概念entry、output
、loader、plugin.下面介绍其基本使用:
1.新建一个webpacktest文件夹,下面新建两个文件夹分别为src、dist.
2.在终端打开webpacktest,执行npm init 初始化后目录下会多一个package.json文件,再安装Webpack包.
(1)全局安装webpack(只在该项目中用,就不用-g)
npm install -g webpack webpack-cli
(2)在src文件夹下建一个index.js作为默认的入口文件
在index.js中写入测试代码,如下:
console.log("hello world");
(3)在package.json文件中,写入下列代码
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode development" // 写入这句代码,利用webpack进行打包,并把模式设置为 --mode development }
模式有两种:development(打包后代码不压缩)、production(打包后代码压缩)
(4)现在在终端运行npm run build ,dist文件夹下就生成了打包好的main.js文件(dist下的main.js是默认的出口文件).
npm run build
以上是零配置的webpack。
3.在根目录下建一个webpack.config.js文件(以下简称配置文件),对webpack进行配置
(注意:每次改写配置文件,都要重新启动,才能生效)
(1)首先配置好入口和出口文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js' //bundle.js是打包后在dist文件夹下生成的文件名(之前默认的是main.js),也可以改为其他的名字
}
};
现在npm run build , dist 文件下会生成一个bundle.js文件(main.js文件还在)
(2)在根目录下,新建一个index.html文件,来引用生成的bundle.js文件(测试打包是否成功),并在浏览器中打开,浏览器控制台就能显示hello world了。
但是这样每次修改src下的index.js文件后,都需要重新运行npm run build,非常麻烦。
改写package.json文件,使webpack可以实时监听src下index.js文件的变化,自动打包。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production -w" //只用配置上 -w }
(3)设置hash码,解决缓存的问题
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle[hash:8].js' //设置8位hash值
}
};
现在打包后index.html要引入dist中生成的js文件非常的麻烦,因为每次改动src下的index.js文件都会自动生成带有不同hash值的bundle.js文件.因此要安装下面的插件.
(4)安装html-webpack-plugin插件(上面的index.html引入bundle.js文件是手动引入的,这个插件可以自动引入)
作用:1.这个插件还会自动根据html模板,在dist文件下生成一个html文件2.自动引入打包后的js文件
npm i --save-dev html-webpack-plugin
在配置文件中引入
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle[hash:8].js'
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }) //实例化 并且将根目录下的index.html文件作为模板
]
};
这时候你发现,dist文件夹下,有很多之前打包生成的文件,它们不会自动清除.因此要下载下面的插件.解决这个问题.
(5)安装clean-webpack-plugin插件(清除之前的打包文件,只留下当前的打包文件)
npm install --save-dev clean-webpack-plugin
在配置文件中引入
现在打包后,之前的文件就会自动被清除了.
(6)现在还不能引入css样式,要想加载css样式,要下载style-loader、css-loader包
npm install --save-dev style-loader css-loader
在src下新建index.css文件并写入样式,并在index.js中引入该文件
在配置文件中引入插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle[hash:8].js'
},
module: { //配置
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }),
new CleanWebpackPlugin()
]
};
现在再次进行打包,可以在浏览器看到写入的样式已经生效了.
webpack只能解析js文件,想要解析css、图片等文件都要下载相关的插件(加载器)(参考webpack官网).解析图片要下载file-loader、url-loader。
(7)下载webpack-dev-server插件
npm install webpack-dev-server --save-dev
改写package.json文件
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production -w", "start":"webpack-dev-server --progress --open -w" //插入这行代码 }
--progress 显示进度条 --open自动打开浏览器 -w监听
在配置文件中配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle[hash:8].js'
},
devServer: {
inline: true, //热更新,改变文件,浏览器自动更新
port: 8000 //改变端口为8000
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }),
new CleanWebpackPlugin()
]
};
现在运行 npm start 会显示打包的进度条(因为现在打包文件太小,可能看不到)浏览器会自动跳出窗口。