webpack配置相关问题记录

这几天空闲下来,仔细看了看webpack的相关配置,主要的文章是 入门 Webpack,看这篇就够了 

一路配置下来,遇到几个问题,特此记录一下


1.描述:在webpack4.0中使用“extract-text-webpack-plugin”之后,生产环境下报错,如何解决

 (node:4728) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:4728) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
/Users/x-kxem/myWorkspace/vue-ssr-tech/node_modules/webpack/lib/Chunk.js:460
throw new Error(
^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/x-kxem/myWorkSpace/vue-ssr-tech/node_modules/webpack/lib/Chunk.js:460:9)
    at /Users/x-kxem/myWorkSpace/vue-ssr-tech/node_modules/extract-text-webpack-plugin/dist/index.js:176:47


解决方法:输入命令npm install extract-text-webpack-plugin@next

具体原因: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701


2.使用了extract-text-webpack-plugin插件后,编译出错,信息如下,

(node:9624) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:9624) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
C:Userszsl08.000DesktopVue-Webpack-todo
ode_moduleswebpacklibChunk.js:460
                throw new Error(
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

webpack4吧,换成mini-css-extract-plugin就好了 https://www.npmjs.com/package/mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
    plugins: [new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: devMode ? '[name].css': '[name].[hash].css',
        chunkFilename: devMode ? '[id].css': '[id].[hash].css',
    })],
    module: {
        rules: [{
            test: /.(sa|sc|c)ss$/,
            use: [devMode ? 'style-loader': MiniCssExtractPlugin.loader, 
            'css-loader', 
            'postcss-loader', 
            'sass-loader', ],
        }]
    }
}

tips: 如果没有用sass之类的,可以把相关loader去掉。

3.使用new webpack.optimize.UglifyJsPlugin()时报错

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

解决方案:

1. webpack内置的JS压缩插件不能使用了,可以安装uglifyjs-webpack-plugin插件,使用同其他非内置插件;

2.--mode production 表示生产环境,只要配置在package.json的script里面 js自动就压缩了

 Uglify是压缩js,现在已经不需要了,只需要在script里面写成

 "build": "webpack --mode production", 就自动压缩了


附一张webpack流程图

webpack配置相关问题记录 第1张

over,吐槽一下webpack的配置真恶心。。。前端也越来越复杂。。

本文标题:webpack配置相关问题记录
本文链接:https://56way.com/p/118.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。