vue 报错 "extract-text-webpack-plugin"

新建项目安装好依赖包之后报错
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

解决方法:

webpack.dev.conf.js 中添加extract-text-webpack-plugin 配置

const ExtractTextPlugin = require('extract-text-webpack-plugin')

plugins: [
    .............
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: false,
    }),
  ]

重新 npm run dev 就成功运行了

文档: webpack-ExtractTextWebpackPlugin
  1. 用途:
    它将所有的入口chunk(entry chunks)中引用.css,独立到移动分离的css文件。因此,样式将不再内嵌到JS bundle中,而是会放到一个单独的CSS文件(即style.css)当中。如果样式文件大小较大,会更快提前加载,因为CSS bundle 会跟 JS bundle并行加载
  2. 用法:
  const ExtractTextPlugin = require('extracrt-text-webpack-plugun')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}
  1. 更多配置参考文档: https://webpack.docschina.org/plugins/extract-text-webpack-plugin/
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容