代码之家 › 专栏 › 技术社区 › sliptype

使用Webpack提取CSS时抑制模块输出

sass webpack javascript

sliptype · 技术社区 · 8 年前

我正在尝试使用webpack 4编译 .scss 文件并将其解压缩到单独的文件中 mini-css-extract-plugin 。

我的网页包配置的相关部分包括:

entry: {
  'styles': './sass/styles.scss',
  ...
},
module: {
  rules: [
  {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ]
  },
  ...
},
plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/[name].css',
    chunkFilename: "[id].css"
  }),
  ...
],
output: {
  filename: 'js/[name].bundle.js',
}

我两个都看到了 css/styles.css 和 js/styles.bundle.js 已发出。有什么方法可以抑制 js/样式。捆js公司 ?我已经尝试使用 suppress-chunks-webpack-plugin 运气不佳(既不发出.css也不发出.js)

2 回复 | 直到 8 年前

davcs86 8 年前

你可以用 Webpack Extraneous File Cleanup Plugin

使用npm或纱线安装

npm install webpack-extraneous-file-cleanup-plugin --save-dev
yarn add webpack-extraneous-file-cleanup-plugin --dev

在您的 webpack.config.js 文件:

const ExtraneousFileCleanupPlugin = require('webpack-extraneous-file-cleanup-plugin');

module.exports = {
  ...
  plugins: [
    new ExtraneousFileCleanupPlugin({
      extensions: ['.js']
    })
  ]
}

jlmt 6 年前

请注意,作为davcs86建议的插件的替代方案, Remove Files Webpack Plugin 对于这个用例,可能也值得考虑-它允许在构建之前或之后根据名称或regexp删除文件。

推荐文章

Brandon Mulas · 如何在electronic+webpack中从Main进程获取javascript对象到Renderer进程

2 年前

Cody Pritchard · Angular-Esbuild区块大小与服务时的构建输出不匹配

2 年前

Alexander A · 为wordpress插件扩展webpack配置创建块交互模板不起作用

2 年前

Mor Bargig · 从production构建中清除开发代码

2 年前

Deepali Jadhav · 如何使用Webpack将resolveExtensions配置应用于公开的组件

2 年前

mightycode Newton · 如何解决错误:webpack.config.js,未检测到“”的Babel配置文件

2 年前

Zain763 · NextJS webpack:已使用与API架构不匹配的生成器对象初始化资产模块插件

2 年前

Manoj Prabakaran M · Element Plus中的El Dialog在JavaScript代码中不起作用

2 年前

Ashwani kumar · 如何解决在webpack.dev.js文件中找不到入口模块和webpack中的错误?

2 年前

Bennyh961 · 使用react图标增加捆绑包大小

3 年前