什么是Webpack
webpack 可以看做是模块打包机, 主要可以做到如下内容
- 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
- 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
- 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
- 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
- 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。
- 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。
- 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。
目的就是工程化,解放生产力
快速上手
安装
npm install webpack webpack-cli -D
基本配置文件
const path=require('path');
module.exports={
mode: ''develepment, // 配置打包环境
entry: './src/index.js', // 配置入口
output: { // 配置出口
path: path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {}, // 配置模块 loaders
plugins: [], // 配置插件
devServer: {}, // 配置开发服务器}
mode
分为两个环境,开发环境(develepment)、生产环境(production)
production 相比 develepment, 会在打包是做很多优化。工作中除上线外都用 develepment
entry output
先用最简单的举例,单入口单出口
const path = require('path'); //node系统模块
module.exports={
//入口配置
entry: './src/index.js',
//出口配置
output:{
path:path.resolve(__dirname,'dist'), //path必须是绝对路径
filename:'bundle.js'
}
};
entry 入口可以使用相对路径,但是output.path 必须使用绝对路径
entry 可以是 字符串'./src/index.js'
、数组 ['./src/index.js']
、对象 {a: './src/index.js'}
如果想出口文件名中包含入口文件名的变量,可以使用 [name].js
多入口文件
const path = require('path');
module.exports = {
entry:['./src/index.js','./src/index2.js'], //按照顺一起打包 bundle.js
output:{
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
}
};
多入口多出口配置
const path = require('path');
module.exports = {
entry:{
index:'./src/index.js',
index2:'./src/index2.js'
},
output:{
path:path.resolve(__dirname, 'dist'),
filename:'[name].bundle.js'
}
};
webpack-dev-server
安装
npm i webpack-dev-server –D
配置 webpack.config.js
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'localhost', compress:true,
port:8080
}
- contentBase 配置开发服务运行时的文件根目录
- host:开发服务器监听的主机地址
- compress 开发服务器是否启动gzip等压缩
- port:开发服务器监听的端口
html 模板
安装 html-webpack-plugin 配置模版
npm i html-webpack-plugin -D
引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
使用
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // 模版地址
})
],
loaders
loader 有三种写法
// 第一种
use:['xxx-loader','xxx-loader']
// 第二种
loader:['xxx-loader','xxx-loader']
// 第三种
use:[{loader:'style-loader'},{loader:'css-loader'}]
处理css文件
安装使用 style-loader css-loader
npm i style-loader css-loader -D
配置
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
处理js
使用 babel 来编译 js
举例编辑 react 项目
安装使用 babel-loader @babel/core @babel/preset-env @babel/preset-react
npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
配置
module: {
rules: [
{test: /\.js$/, use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
}
}}
],
},
处理图片
安装使用 file-loader url-loader
cnpm i file-loader url-loader -D
配置
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
limit:50,
outputPath:'images'
}
}]
}
静态资源输出
安装使用 copy-webpack-plugin
npm i copy-webpack-plugin -D
引入
const CopyWebpackPlugin = require('copy-webpack-plugin');
使用
plugins:[
new CopyWebpackPlugin([{
from:path.resolve(__dirname, 'src/assets'),
to:'./public'
}])
]