大话webpack-完善功能

前言

在小编的上一篇博客分析之中我们的webpack工具已经可以帮我们实现最基本的前端页面需求，我们自己搭建的webpack怎能这么low呢，今天再来二次完善一下我们的工具包，这篇分享是衔接上一篇文章的。

二次大话

完善搭建

一、静态资源调用

在主页中引入已有的静态资源文件，我们在public栏中放入js文件夹(用于存放已有的静态资源文件)，index文件直接引入，那可不会允许你这样。webpack：我都已经跟你把转义和输出都写好了，你还自己引入文件，我才不在帮你把外部文件再转义好加进来了呢，太麻烦我了？那只能再给他买上礼物(安装插件)，安抚一下了。

该插件我们实现将我们的静态资源目录拷贝到我们打包后的dist文件目录下，打包后就直接调用。

npm install copy-webpack-plugin -D

同样的引入之后我们配置一下webpack.config.js文件

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            {
                from: 'public/js/*.js',
                to: path.resolve(__dirname, 'dist', 'js'),
                flatten: true, // 该参数设置拷贝时不会把整个文件目录拷贝下来
            },
        ], {
            ignore: ['alone.js'] // 这边是筛选参数，写进去public下该文件不会被拷贝过去，可以没有需求可以不设置
        })
    ]
}

二、抽离CSS文件并压缩

我们知道没有抽离出来CSS文件打包，打包后样式实现是最后的js文件去实现，这样可以分担一下打包成的js文件的容量，同样的抽离出来的CSS文件我们也进行依稀压缩，导入插件

npm install mini-css-extract-plugin -D

再次配置一下webpack.config.js文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(le|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader, //替换之前的 style-loader
                    'css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('autoprefixer')({
                                        "overrideBrowserslist": [
                                            "defaults"
                                        ]
                                    })
                                ]
                            }
                        }
                    }, 'less-loader'
                ],
                exclude: /node_modules/
            }
        ]
    }
}

引入压缩插件

npm install optimize-css-assets-webpack-plugin -D

然后配置引用一下该插件

//webpack.config.js
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    plugins: [
        // 这边直接调用就好了不需要调配什么参数
        new OptimizeCssPlugin()
    ],
}

三、热更新

这是打包工具必备的一个功能，能让我们修改代码保存以后自动更新，webpack插件中包含此功能对象我们直接调用

//webpack.config.js
const webpack = require('webpack');
module.exports = {
    //....
    devServer: {
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //热更新插件
    ]
}

四、多界面应用打包

到目前为止页面的功能已经是基本完善，那么多页面webpack又是如何处理的呢？我们直接定义多个入口文件实现多页面打包，在配置页面的时候我们要加上chunks参数配置，要不然界面会将入口js文件都加载而没办法对应。

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:6].js'
    },
    //...
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html', //打包后的文件名
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: './public/login.html',
            filename: 'login.html', //打包后的文件名
            chunks: ['login']
        }),
    ]
}

---

总结

那么到这里基础架构功能已经完成了，后续就是对于webpack的一些优化措施。