第一步
首先整个新文件夹，打开终端，然后创建一个新目录，或者直接在vscode里面建个新文件夹，并进入该目录；
mkdir my-vue-webpack-project
1
第二步 进入当前目录
cd my-vue-webpack-project
1
第三步 初始化npm项目
npm init -y
1
第五步 安装webpack
npm i -D webpack webpack-cli webpack-dev-server
1
安装完成之后我们需要配置webpack，在外层建一个build的文件夹，然后在build文件夹中建一个webpack.config.js
const path = require('path');
module.exports = {
mode: 'development', // 开发模式
entry: path.resolve(dirname, '../src/main.js'), // 入口文件
output: {
filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为main
path: path.resolve(dirname, '../dist'), // 打包后的目录，这里会自动创建dist文件夹
clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用,webpack5新增。
}
}
1
2
3
4
5
6
7
8
9
10
11
当前目录如下
第六步 安装html-webpack-plugin插件
对项目打包压缩之后，会有一个压缩的js文件，我们需要把这个js文件引入到我们的根入口文件index.html中，
html-webpack-plugin这个插件可以自动化完成这个操作
npm i -D html-webpack-plugin
1
基于以上6步，来个基本的打包示例
1.我们在外层再新建一个pubilc文件夹，在public文件夹里面建一个index.html,之后在webpack.config.js里面引入第六步安装的插件，并写在plugins数组里面，写完之后的webpack.config.js代码如下：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', //开发环境
entry: path.resolve(dirname,'../src/main.js'),//入口文件
output: {//输出文件
path: path.resolve(dirname,'../dist'),
filename: '[name].[hash:8].js',//输出文件名
clean: true, //每次打包前清空dist文件夹
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'../public/index.html'),//模板文件
})
],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2.需要在package.json里面加上build打包指令，注意在script对象里面加以下指令
"build": "webpack --config build/webpack.config.js"
1
3.完成上述内容，就可以在命令行执行npm run build来打包啦
打包成功后如下
完成以上示例进入拓展内容
第七步 安装css相关loader插件解析我们项目中的css
涉及到css我们需要安装一些常用的css处理插件，比如css，less等相关loader
npm i -D style-loader css-loader less less-loader
1
之后在webpack.config.js中配置rules
// webpack.config.js
module.exports = {
//...省略其他配置
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /.css$/,
exclude: path.resolve(dirname, 'node_modules'),
use: ['style-loader', 'css-loader'] // 切记从右向左解析原则
},
{
test: /.less$/,
exclude: path.resolve(dirname, 'node_modules'),
use: ['style-loader', 'css-loader', 'less-loader'] // 从右向左解析原则
}
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
第八步 安装autoprefixer ，为css添加浏览器前缀
因为有些CSS属性只支持某个浏览器，或者因为某个属性前端还没形成统一的标准，所以需要在某些css属性上加上各个浏览器的前缀，比如-webkit/-moz等等
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
1
2
3
4
5
6
先安装依赖：
npm i -D postcss-loader autoprefixer
1
之后在webpack.config.js里面配置postcss-loader以及autoprefixer 插件即可
module: {
rules: [
{
test: /.less$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: ['style-loader', 'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
},
'less-loader'] // 从右向左解析原则
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
第九步 把css样式从js单独抽离出一个文件
安装插件
npm i -D mini-css-extract-plugin
1
添加插件相关配置【以下包括前面几个步骤的配置，这一步主要看MiniCssExtractPlugin 】
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
mode: 'development', //开发环境
entry: path.resolve(dirname,'../src/main.js'),//入口文件
output: {//输出文件
path: path.resolve(dirname,'../dist'),
filename: '[name].[hash:8].js',//输出文件名
clean: true, //每次打包前清空dist文件夹
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(dirname,'../public/index.html'),//模板文件
}),
new MiniCssExtractPlugin({
filename: "[name].[hash:8].css",
chunkFilename: "[id].css",
})
],
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /.css$/,
exclude: path.resolve(dirname, 'node_modules'),
use: [MiniCssExtractPlugin.loader,'css-loader'] // 切记从右向左解析原则
},
{
test: /.less$/,
exclude: path.resolve(__dirname, 'node_modules'),
use: [MiniCssExtractPlugin.loader,'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
},
,'less-loader'] // 从右向左解析原则
}
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
测试打包效果，在src下面新建一个index1.css文件和index2.less文件，并在main.js引入。
之后运行下`npm run build，可以看到dist下的js和css。发现main.css整合了src下面两个css
第十步 babel转义js文件【比较重要】
首先安装一系列Babel库，babel-loader负责将ES6/7/8等语法转换为ES5语法 core-js负责将新的api进行转化，例如promise、Generator、Set、Maps、Proxy等
npm i -D babel-loader @babel/preset-env @babel/core @babel/plugin-proposal-decorators
1
npm i -D @babel/plugin-transform-arrow-functions @babel/plugin-transform-runtime
1
npm install @babel/plugin-proposal-class-properties --save-dev
1
上面基本是常用的一些webpack配置项；
我们还可以做一些其他配置，比如热更新
安装插件
npm i -D webpack-dev-server
1
然后把下面这个命令行放在package.json里面的script对象里面
"dev": "webpack serve --config build/webpack.config.js"
1
{
"scripts": {
"dev": "webpack serve --config build/webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/webpack.config.js"
},
}
1
2
3
4
5
6
7
然后就可以npm run dev运行啦
正常项目我们还要区分下dev环境和生产环境
新建两个文件夹
webpack.dev.js 开发环境使用
webpack.prod.js 生产环境使用
webpack.config.js 公用配置
安装webpack-merge插件库，来合并配置项
npm i -D webpack-merge
1
// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js')
module.exports = merge(common, {
mode: 'development',
devServer:{
port:3000
}
});
1
2
3
4
5
6
7
8
9
10
11
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
module.exports = merge(common, {
mode: 'production',
});
1
2
3
4
5
6
7
8
原先的webpack.config.js也需要做出修改，我们只需要删除mode和devserver字段
packpage.json修改
"scripts": {
"build": "webpack --config build/webpack.prod.js",
"dev": "webpack serve --config build/webpack.dev.js"
},
