webpack搭建环境 webpack多入口配置（二）

引言

用webpack搭建环境 webpack多入口配置（一）搭建的环境有很多不足之处，而且在使用开发过程中遇到很多坑。下面我来说下我的坑坑们。

不足之处

为了应付差事，项目要的急，大家都懂得，时间紧张，所以缺少了很多东西，凑活上了就。
首先，没有分离css，其次，没有对代码进行压缩处理。本篇文章主要就这两点进行讨论。

解决不足

明确了问题，我们就要找解决方案，前端的轮子很多，需要什么可以百度或者问问前辈们，经过自己的查询和踩坑前辈的指导，我首先找到了extract-text-webpack-plugin 这个插件，看到大腿就迫不及待的想要抱啊，二话不说一通安装 --save-dev。然后就是一通的红色报错啊，麻蛋的还是英文，大概意思就是什么什么不支持，需要安装什么什么loader之类的，然后又开始百度，查到原来这个东西只支持webpack4以下的版本，问了一个朋友建议我换webpack3，有新版本的怎可屈尊用旧版本的东西，后来终于查到这个替代这个东西的插件mini-css-extract-plugin 和 optimize-css-assets-webpack-plugin 前者用来打包抽离css，后者压缩css。

配置抽离css并且压缩

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
plugins: [
    new OptimizeCSSAssetsPlugin({}),
    new MiniCssExtractPlugin({
        filename: 'css/[name].css',
        chunkFilename: 'css/[id].css',
        publicPath:'https://www.w2le.com/' //这里配置引用路径
    })
],
module: {
    rules: [
    {
        test: /\.(sa|sc|c)ss$/,
        use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        // 'postcss-loader',
        // 'sass-loader'
        ]
        }
    ]

图片压缩和js压缩

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
plugins:[
    new UglifyJsPlugin(),
    new ImageminPlugin({
        pngquant: {
            quality: '95-100'
        }
    })
]

在模板中引用js

我们知道打包后入口文件js会被自动插入到模板文件，如果我们想用相对路径引用js要怎么办呢，可以用copy-webpack-plugin这个插件

const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([{
    from: __dirname + '/src/public', //文件位置
    to: __dirname + '/dist/public',   //打包后文件位置
    force: true
}]),

后期会陆续介绍下这些插件的配置，请和感谢大家持续关注。

webpack搭建环境 webpack多入口配置 （二）