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

Question

我是 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"
  }
}

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

Answer 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。