01. webpack简介
作用
代码压缩、图片压缩、脚本压缩、css3前缀自动添加、代码混淆等工作
使用步骤
1. 安装node
2. npm init 创建package.json文件
3. 安装webpack以及webpack-cli依赖包
4. 在项目中创建webpack.config.js文件,该文件用于配置webpack
快速入门案例
下面是一个很简单的网页,具体代码可以参考下面的链接
现在我们来使用webpack进行打包,具体要求如下 :
1、html压缩
2、css压缩
3、js压缩
4、图片压缩
5、css3前缀自动添加
6、es6语法转es5
在使用webpack进行打包前,需要把案例的一些代码改成es6的语法。如下 :
然后按照上面说的使用步骤,一步一步来弄。这里笔者已经按装过node了,这里就跳过。
先来创建package.json文件,如下 :
npm init
成功后,项目中会有一个这样的文件 :
然后安装webpack和webpack-cli这2个插件到项目中
npm i webpack webpack-cli -S
最后创建webpack.config.js,此时你的项目文件应该是这样的 :
然后我们只需要配置webpack.config.js文件即可
配置webpack.config.js文件之前,有4个概念需要简单的了解一下
entry : 入口,告诉webpack,从哪里开始进行配置
output : 出口,打包后的文件放哪里
module :一般用于配置一些规则,比如css文件用什么规则来进行打包,js文件用什么规则进行打包
plugins : webpack的插件配置
先来写下最简单的webpack配置代码 :
const path = require('path'); //用于读取和写入文件
module.exports = {
entry : './js/index.js', //指定入口文件
output : { //出口
path : path.resolve(__dirname, 'dist'), //打包后的文件在当前目录下,打包后的文件夹名字叫dist
filename : 'js/index.js' //js打包后的文件路径
},
module:{
rules : [
]
},
plugins:[
]
}
然后我们在package.json的scripts里,创建一条webpack的打包命令 :"build:dev": "webpack --mode development"
然后调出控制台,执行以下命令 :
npm run build:dev
执行后会发现,当前项目目录会生成一个dist的文件夹,里面有一个js文件,文件里有一个叫index.js的文件,此时我们已经成功的把js打包出来了。
但是控制台很明显有报错 :
这里的意思是,webpack不知道怎么处理css文件,因为我们在js文件里面,是有引入css文件的
webpack也给了我们解决方案,大概的意思就是让我们安装一些loader来处理css文件。这里我们只需要安装css-loader、style-loader来处理css文件然后在webpack中配置即可。
安装完毕后的配置如下 :
const path = require('path');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/, //匹配所有以.css文件结尾的文件,然后都用下面的2个loader来处理
use : ['style-loader','css-loader']
}]
},
plugins:[
]
}
然后再次执行打包命令,会再次报错。
意思是css文件里,我们有引入过图片。
所以图片也需要相应的loader来处理。这里我们需要安装file-loader,然后配置如下 :
const path = require('path');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/,
use : ['style-loader','css-loader']
},{
test : /.(png|jpg|gif|jpeg)$/, //匹配以png、jpg、gif、jpeg结尾的文件,都使用file-loader来处理
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images' //打包后的文件夹路径以及文件夹名字
}
}]
}]
},
plugins:[
]
}
然后再次执行打包命令,这次没报错了。打包后的dist文件夹如下 :
这个时候打包出来的dist文件下,并没有html文件,这是我们还需要安装一个html-webpack-plugin的插件,这个插件可以帮助我们把html文件打包出来,安装完后配置如下 :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/,
use : ['style-loader','css-loader']
},{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
}]
}]
},
plugins:[
new HtmlWebpackPlugin({
template : './index.html', //指定要打包的文件
filename : 'index.html', //打包后的文件
minify : {
minimize : true, //是否打包为最小值
removeAttributeQuotes : true, //去除引号
removeComments : true, //去除注释
collapseWhitespace : true, //去除空格
minifyCSS : true, //压缩html内的样式
minifyJS : true, //压缩html内的js
removeEmptyElements : false, // 清理内容为空的元素
},
hash : true
}),
]
}
再次执行打包命令,可以看到html文件被打包出来了。
此时我们运行html文件看看,会发现是这样的 :
控制台上还有报错
首先看第一个错误,说是找不到图片。1.jpg这个图片并没有被打包出来。这是因为这个文件是在html内被引用的,并没有在css文件上
所以这个文件并没有被webpack打包,你可以直接打开dist下的images文件夹,会发现也没有这张图片。此时只需要安装html-withimg-loader这个loader在配置即可。配置如下 :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/,
use : ['style-loader','css-loader']
},{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
}]
},{//处理html的图片文件
test: /.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
plugins:[
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : true,
},
hash : true
}),
]
}
再次运行打包命令,页面此时如下 :
但是打开控制台,此时还是会看到错误。实际上在服务器下运行改项目,则不会报错。这里先忽略。此时打包后的文件夹如下 :
可以看到,css文件并没有,但是页面的布局并没有乱,这是因为css文件合并在了js文件里面了。我们可以打开js文件来看看
这不是我们想要的,需要把css文件打包出来我们需要安装mini-css-extract-plugin,然后配置如下 :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //引入插件
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/,
use : ['style-loader',
//提取css
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},'css-loader']
},{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
}]
},{
test: /.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
plugins:[
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : false,
},
hash : true
}),
new MiniCssExtractPlugin({ //提取css后的文件路径
filename : './css/index.css'
}),
]
}
然后打包出来的css文件并没有压缩,还需要安装optimize-css-assets-webpack-plugin这个插件,然后配置如下 :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); //引入插件
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/,
use : ['style-loader',
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},'css-loader']
},{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
}]
},{
test: /.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
plugins:[
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : false,
},
hash : true
}),
new MiniCssExtractPlugin({
filename : './css/index.css'
}),
new OptimizeCssAssetsWebpackPlugin({ //压缩css
assetNameRegExp : /.css$/g,
cssProcessor : require('cssnano'),
cssProcessorPluginOptions : {
preset : ['default', {
discardComments : {
removeAll: true
}
}]
},
canPrint :true
})
]
}
好了,现在只剩下图片压缩和css3前缀自动添加这2个功能还没有。我们先来弄图片压缩,图片压缩需要安装image-webpack-loader,配置如下 :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/,
use : ['style-loader',
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},'css-loader']
},{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
},
//图片压缩
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
quality: [0.65, 0.90],
speed: 4
}
}]
},{
test: /.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
plugins:[
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : false,
},
hash : true
}),
new MiniCssExtractPlugin({
filename : './css/index.css'
}),
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp : /.css$/g,
cssProcessor : require('cssnano'),
cssProcessorPluginOptions : {
preset : ['default', {
discardComments : {
removeAll: true
}
}]
},
canPrint :true
})
]
}
然后是css前缀自动添加,需要安装postcss-loader和autoprefixer,配置如下 :
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
entry : './js/index.js',
output : {
path : path.resolve(__dirname, 'dist'),
filename : 'js/index.js'
},
module:{
rules : [{
test : /.css$/,
use : ['style-loader',
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},'css-loader',{ //css3前缀自动添加
loader : 'postcss-loader',
options : {
plugins : [
require('autoprefixer')({
browsers : [
'ie >=8',
'Firefox >=20',
'Safari >=5',
'Android >=4',
'Ios >=6',
'last 4 version'
]
})
]
}
}]
},{
test : /.(png|jpg|gif|jpeg)$/,
use : [{
loader : 'file-loader',
options : {
esModule: false,
outputPath : './images'
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
quality: [0.65, 0.90],
speed: 4
}
}]
},{
test: /.(htm|html)$/i,
use:['html-withimg-loader']
}]
},
plugins:[
new HtmlWebpackPlugin({
template : './index.html',
filename : 'index.html',
minify : {
minimize : true,
removeAttributeQuotes : true,
removeComments : true,
collapseWhitespace : true,
minifyCSS : true,
minifyJS : true,
removeEmptyElements : false,
},
hash : true
}),
new MiniCssExtractPlugin({
filename : './css/index.css'
}),
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp : /.css$/g,
cssProcessor : require('cssnano'),
cssProcessorPluginOptions : {
preset : ['default', {
discardComments : {
removeAll: true
}
}]
},
canPrint :true
})
]
}
然后打开页面,可以看到css3的属性自动添加了前缀
上面的demo可以在这里下载 :demo