webpack的安装与基本使用

一、webpack的基本配置
运行 npm install webpack webpack-cli -D 命令安装webpack 相关的包
在项目的根目录中，创建名为webpack.config.js的webpack配置文件
在webpack的配置文件中，初始化如下基本配置：
module.exports={
//编译模式
mode:'development' //development表示开发阶段 production表示生产阶段
}
1
2
3
4
在package.json配置文件中的scrpts节点下，新增dev脚本如下：
"scripts":{ //script节点下的脚本，可以通过npm run执行
"dev":"webpack"
}
1
2
3
在终端中运行npm run dev命令，启动webpack进行项目打包
二、webpack的基本使用
1.配置webpack打包的入口与出口
在webpack的4.x版本中默认约定：打包的入口文件时src目录下的index.js，打包的输出文件是dist目录下的main.js，如果要修改打包的入口与出口，可以在webpack.config.js中配置如下信息：

const path = require('path')//导入node.js中的path模块用来获取当前目录的绝对路径
module.exports = {
//编译模式
mode: 'production',
//配置入口文件的绝对路径
entry: path.join(__dirname, './src/index.js'),
//配置输出文件
output: {
path: path.join(__dirname, './dist'), //输出文件存放的路径
filename: 'index.js' //输出文件的名称
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2.配置webpack的自动打包功能
当你每次修改完代码后，需要重新执行npm run dev命令重新打包才能看到你代码修改后的效果，是不是很麻烦，接下来就来介绍一下web的自动打包功能：

运行npm install webpack-dev-server -D命令安装支持项目自动打包的工具
修改package.json文件中的scripts的dev命令如下所示：
"scripts":{
"dev":"webpack-dev-server"
}
1
2
3
将src下的index.html中的，引入的script脚本的路径改成更目录下的路径，例如将"…/dist/index.js",改为"/index.js"
运行npm run dev命令，重新打包
在浏览器中就可以通过http://localhost:8080地址，查看自动打包的效果，
这样每次修改完代码一保存，就自动帮你打包了

如果你想打包完成的一瞬间自动打开浏览器访问页面可以如下配置：

//package.json中的配置
//--open 打包完成后自动开的浏览器页面
//--host 配置iP地址
//--port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
1
2
3
4
5
6
7
注意

webpack-dev-server 会启动一个实时打包的http服务器，它会监听代码，只要代码发生了变化就会自动打包
webpack-dev-server 自动打包生成的输出文件，默认放到了项目的根目录中，是虚拟的，看不到
3.配置html-webpack-plugin生成预览页面
运行 npm install html-webpack-plugin -D命令，安装生成预览页面的插件
修改webpack.config.js文件顶部区域，添加如下配置信息：
//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugin=new HtmlWebpackPlugin({//创建一个构造函数的实例对象
template:'./src/index.html',//指定要用到的模板文件
filename:'index.html'//指定生成文件的名称，该文件在内存中，在目录中看不到
})
1
2
3
4
5
6
修改webpack.config.js文件添加向外暴露的配置节点：
plugins: [htmlplugin] //plugins数组是webpack会用到的一些插件列表
1
三、webpack中的加载器
在实际开发过程中，webpack默认只能打包处理以.js为后缀名结尾的模块，其他非.js结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！loader加载器可以协助webpack打包处理带待定的文件模块，比如：

less-loader 可以打包处理.less相关的文件
sass-loader 可以打包处理 .scass相关的文件
url-loader 可以处理.css中与url路径相关的文件
1.如何打包处理css文件
运行 npm i style-loader css-loader -D 命令，安装处理css文件的loader
在webpack.config.js的module->rules数组中，添加loader规则如下：
//所有第三方文件模块的匹配规则
module:{
rules:[//test是一个正则代表匹配文件的类型，use表示对应要调用的loader
{test:/\.css$/,use:['style-loader','css-loader']}//注意：use数组中指定的loader顺序是固定的，不能颠倒，多个loader的是从后往前调用的
]
}
1
2
3
4
5
6
2.打包处理less文件
运行 npm i less-loader less -D 命令
在webpack.config.js的module->rules数组中，添加loader规则如下：
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
1
2
3
4
5
3.配置postCSS自动添加css的兼容性前缀
运行npm i postcss-loader autoprefixer -D 命令
在项目根目录下创建postcss的配置文件postcss.config.js,并初始化如下配置：
const autoprefixer=require('autoprefixer')//导入自动添加前缀的插件
module.exports={
plugins:[autoprefixer]
}
1
2
3
4
在webpack.config.js的module->rules数组中，修改css的loader规则如下:
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
1
2
3
4
5
4.打包样式表中的图片和字体文件
运行npm i url-loader file-loader -D 命令
在webpack.config.js的module->rules数组中，添加loader规则如下：
module:{
rules:[//?之后的是loader的参数项，单位是byte，只有小于limit大小的图片才会被转为base64图片
{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16940'}
]
}
1
2
3
4
5
5.打包处理js文件中的高级语法
安装babel转换相关的包：npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下：
module.exports={
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
1
2
3
4
在webpack.config.js的module->rules数组中，添加loader规则如下：
//exclude为排除项,表示babel-loader不需要处理node_modules中的js文件
{test:/\.js$/,use:['babel-loader'],exclude:/node_modules/}
1
2
webpack的整体打包发布
通过配置package.json文件配置打包命令如下：

//该命令默认加载项目根目录中的webpack.config.js配置文件
"scripts":{
//用于打包的命令
"build":"webpack -p",
//用于调试的命令
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000",
}
————————————————
版权声明：本文为CSDN博主「LiSmallStick」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_47356255/article/details/106046809