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

如何将JS和CSS文件与Webpack独立绑定?

webpack-4 webpack javascript

Finesse · 技术社区 · 6 年前

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    scriptFoo: './src/js/scriptFoo.js',
    scriptBar: './src/js/scriptBar.js',
    // ...
    styleBaz: './src/css/styleBaz.scss',
    styleBaq: './src/css/styleBaq.scss'
    // ...
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};

工作正常,Webpack将编译的文件放到 dist 目录。但它也会为数据库中的每个SCSS文件创建一个多余的伪JS文件 分布

webpack.config.js
src/
  js/
    scriptFoo.js
    scriptBar.js
    ...
  css/
    styleBaz.scss
    styleBaq.scss
    ...
dist/
  scriptFoo.js
  scriptBar.js
  ...
  styleBaz.css
  styleBaz.js // Excess
  styleBaq.css
  styleBaq.js // Excess
  ...

如何使Webpack不产生多余的JS文件?

2 回复 | 直到 6 年前

Finesse 6 年前

使用 ignore-emit-webpack-plugin

npm install --save-dev ignore-emit-webpack-plugin

然后将其添加到您的网页包配置中:

const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    // ...
    new IgnoreEmitPlugin(['styleBaz.js', 'styleBaq.js']) // Or simply: new IgnoreEmitPlugin(/^style.*\.js$/)
  ]
};

Jagadish N 6 年前

这是因为对于entry对象中的每个属性,js文件都是在输出目标中创建的。

output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') },

当css是一个入口点时,创建虚拟js的Webpack是一个已知的bug,它还没有被修复。

在条目配置中有多个条目文件也会影响树生成功能

推荐文章

Guillaume Harari · 根据开发或产品环境加载css

7 年前

Max Silva · 无法使用vuejs2和webpack嵌入自定义字体

7 年前

Fered · Npm、Dev dependecy或dependecy,当使用webpack等将所有内容打包到一个脚本中时?

7 年前

Carlo · 如何使用Webpack 4仅在某些模块中导入jQuery?

7 年前

zh-mskl9 · Pug+Web包开发服务器

7 年前

Mizlul · 无法解析“css加载程序!”!自动刷新器加载程序'

7 年前

Aleksandr Gvozdev · 模拟'fs。readdirSync`节点。无递归的js

7 年前

jonnyg · 如何在docker文件中获取我可用的docker环境变量?(使用React/JS/webpack)

7 年前

Boris K · 将Extract Text Webpack插件与Vue CLI 3配合使用

7 年前

IsraGab · 使用webpack从angularjs模块加载特定指令

7 年前