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