当前位置:首页 > webpack搭建环境 webpack多入口配置 (二)

webpack搭建环境 webpack多入口配置 (二)

发布于 2周前 阅读 24 次 webpack

引言

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

不足之处

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

解决不足

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

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