Webpack 2 - 如何停止为 CSS 和 HTML 生成 .js 文件？答案

【问题标题】：Webpack 2 - How to stop generating .js files for CSS and HTML?Webpack 2 - 如何停止为 CSS 和 HTML 生成 .js 文件？
【发布时间】：2017-08-09 05:58:07
【问题描述】：

我是 Webpack (2) 的新手，所以请原谅我到目前为止的简单理解。

根据网上的一些教程，我拼凑了一个有效的 package.json 和 webpack.babel.config.js 文件。

本质上，我正在尝试将 SCSS 转换为 CSS，将 Pug 转换为 HTML，将 JS 转换为 Babel'd JS。

当我运行我的dist 命令时，它会生成文件，但随之而来的是每个 .scss 和 的 .js 文件。 html 等。希望下面的图片可以说明这一点：

理想情况下，我所追求的只是app.css、index.html 和app.js。

webpack.babel.config.js

import webpack from 'webpack';
import path from 'path';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const extractHtml = new ExtractTextPlugin({
  filename: '[name].html'
});

const extractPug = new ExtractTextPlugin({
  filename: '[name].[contenthash].pug'
});

const extractScss = new ExtractTextPlugin({
  filename: '[name].[contenthash].css',
  allChunks: true
});

let config = {
  stats: {
    assets: false,
    colors: true,
    version: false,
    hash: true,
    timings: true,
    chunks: false,
    chunkModules: false
  },
  entry: {
    'dist/html/app': [
      path.resolve(__dirname, 'src/pug/app.pug')
    ],
    'dist/js/app': [
      path.resolve(__dirname, 'src/js/app.js')
    ],
    'dist/css/app': [
      path.resolve(__dirname, 'src/scss/app.scss')
    ]
  },
  output: {
    path: path.resolve(__dirname, './'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: extractHtml.extract({
          use: ['html-loader','pug-html-loader?pretty=false&exports=false']
        })
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: ['babel-loader']
      },
      {
        test: /\.scss$/,
        use: extractScss.extract({
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: false,
    stats: 'errors-only',
    open: false
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Portfolio',
      // minify: {
      //   collapseWhitespace: true
      // },
      hash: true,
      template: './dist/html/app.html',
      filename: 'index.html'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: true,
      options: {
        babelLoader: {
          presets: [
            ['es2015']
          ]
        },
        postcss: [
          autoprefixer({
            browsers: ['last 2 versions', 'Explorer >= 9', 'Android >= 4']
          })
        ],
        sassLoader: {
          includePaths: [
            path.resolve(__dirname, 'node_modules/sanitize.css/')
          ]
        }
      }
    }),
    extractScss,
    extractHtml,
    extractPug
  ]
}

export default config;

package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "Portfolio of Michael Pumo",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "webpack -p",
    "dist": "webpack --config webpack.config.babel.js"
  },
  "author": "Michael Pumo",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "css-loader": "^0.27.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "html-webpack-pug-plugin": "^0.0.3",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.3",
    "pug": "^2.0.0-beta11",
    "pug-html-loader": "1.1.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.14.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  }
}

我还有许多其他问题也想解决，但我一次只解决一个问题。感谢您的帮助。

【问题讨论】：

标签： javascript webpack webpack-2 webpack-style-loader

【解决方案1】：

您不想使用多个条目，而是将其添加到单个条目中。要使其与extract-text-webpack-plugin 很好地配合使用，您还应该稍微更改output。将output.path 设置为dist/ 目录会更容易，这在概念上也更有意义。您将拥有一个app 的入口点，然后将不同文件类型的输出设置到相应的目录。对于 JavaScript，这是 output.filename 选项，您希望在 js/ 中使用它。您的输入和输出应如下所示：

entry: {
  app: [
    path.resolve(__dirname, 'src/pug/app.pug'),
    path.resolve(__dirname, 'src/js/app.js'),
    path.resolve(__dirname, 'src/scss/app.scss')
  ]
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'js/[name].js'
},

您对提取文本插件中的文件名执行与 output.filename 相同的操作：

const extractHtml = new ExtractTextPlugin({
  filename: 'html/[name].html'
});

const extractScss = new ExtractTextPlugin({
  filename: 'css/[name].[contenthash].css',
  allChunks: true
});

你根本没有使用extractPug，所以我把它关掉了，你可能想删除它。

输出将如下所示：

dist
├─ css
│  └─ app.50352154102b272d39e16c28ef00c1ac.css
├─ html
│  └─ app.html
├─ js
│  └─ app.js
└─ index.html

现在您在dist 目录中也有index.html，您可以简单地部署dist 目录，因为它是自包含的。

附带说明：您不应该使用./dist/html/app.html 作为html-webpack-plugin 的模板，而是直接将.pug 文件与pug-loader 一起使用，这意味着您甚至不需要将其添加到条目或提取 HTML。

【讨论】：

谢谢。我现在已经按照你的建议做了。文件已生成，但出现错误提示：“错误中的错误：子编译失败：模块构建失败：错误：“extract-text-webpack-plugin”加载器在没有相应插件的情况下使用”。在 /app 文件夹中打开我的 HTML 文件，我发现它也充满了错误。有任何想法吗？谢谢。
extract-text-webpack-plugin 错误意味着您没有将其放入plugins，请确保您将它们全部放入其中，您在发布的配置中已将其删除，但也许您删除了一个你还在用。
我认为这是由于插件数组中的“新 HtmlWebpackPlugin”。如果我评论那部分，构建不会出错。但我需要那部分来插入脚本和链接标签，对吧？编译后的 app.html 不包含这些部分。我仍在导入相同的模块。
如果您使用.pug 文件作为html-webpack-plugin 的模板，则不能使用/\.pug$/ 的提取插件。因此，您需要删除它并使用 pug-loader 代替该规则。然后你也可以从你的条目中删除app.pug。
是的，就是这样。我应该已经阅读了您之前所说的内容：“...而是直接将 .pug 文件与 pug-loader 一起使用，这意味着您甚至不需要将其添加到条目中或提取 HTML”。现在可以了。非常感谢！

【解决方案2】：

据我了解，您的每个入口点都有一个输出（this 似乎建议这样做）。我相信最常见的用例是只有一个入口点（通常是 app.js 或 index.js），并且所有需要的文件（如 css 和其他 js 文件）在应用程序中都是“required”。 js（或者如果你使用的是 ES6，则导入）。这样，只有一个输出 js 文件。此外，您可以在加载程序的查询中定义每个加载程序的单独输出文件的存储位置。

例如，这是我的 webpack 配置文件的一部分：

  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader' },
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']},
      {test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader', query: {name: 'fonts/[name].[ext]'}},
      {test: /\.(jpg|png)$/, loader: 'file-loader', query: {name: 'img/[name].[ext]'}},
      {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'}
    ]
  }

每个加载器上的query 参数指定每个加载器的输出目录和文件名。

【讨论】：