学习笔记:入门webpack

129 阅读1分钟

参考文献1:入门 Webpack,看这篇就够了

本地系统环境

  • Win10
  • Node v8.11.4
  • webpack@4.17.2
  • webpack@3.1.0

按照-参考文献1-安装

出现2个BUG:

  1. 错误显示:
webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

我们需要以下几步:
用npm安装uglifyjs-webpack-plugin插件;
将其引入:var uglifyjsPlugin=require('uglifyjs-webpack-plugin');
删除以前的写法,将optimization的JS压缩与plugins并排写在一起,注意,是并排,而不是像以前一样写在plugins里面。
最后结果如下:

var webpack=require('webpack');
//这个插件是用来生成html的
var HtmlwebpackPlugin=require('html-webpack-plugin');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var merge=require('webpack-merge');
var webpackBaseConfig=require('./webpack.config.js');
var UglifyJsPlugin=require('uglifyjs-webpack-plugin');

//清空基本配置的插件列表
webpackBaseConfig.plugins=[];

//用于合并两个webpack的配置文件
module.exports=merge(webpackBaseConfig,{
    output:{
        publicPath:'/dist/',
        //给文件名加hash值,是为了使文件名唯一,这样只要不对html文件设置缓存,上线后立即就可以加载最新的静态资源
        filename:'[name].[hash].js'
    },
    plugins:[
        new ExtractTextPlugin({
            filename:'[name].[hash].css',
            allChunks:true
        }),
        //定义当前生产环境为node环境
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV:'"production"'
            }
        }),
        //提取模板,并保存入口html文件
        //这是来生成html文件的,它通过template选项来读取指定的模板index.ejs,然后输出到filename指定的文件
        new HtmlwebpackPlugin({
            filename:'../index_prod.html',
            template:'./index.ejs',
            inject:false
        })
    ],
     //压缩js
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            })
        ]
    },
})
  1. 配置webpack4报错:Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead时,应该是插extract-text-webpack-plugin的版本问题