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

Question

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

在网络上的一些教程之后，我整理了工作package.json和webpack.babel.config.js文件。

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

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

理想的情况是我后简直是，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它会变得更加容易，这在概念上也更有意义。您将拥有一个入口点，然后将不同文件类型的输出设置到相应的目录。对于 JavaScript ，这就是您想要的选项output.pathdist/appoutput.filenamejs/。您的输入和输出应如下所示：

\n\n

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

\n\n

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

\n\n

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

\n\n

你根本没有使用过extractPug，所以我把它保留了下来，你可能想删除它。

\n\n

输出将如下所示：

\n\n

dist\n\xe2\x94\x9c\xe2\x94\x80 css\n\xe2\x94\x82\xc2\xa0 \xe2\x94\x94\xe2\x94\x80 app.50352154102b272d39e16c28ef00c1ac.css\n\xe2\x94\x9c\xe2\x94\x80 html\n\xe2\x94\x82\xc2\xa0 \xe2\x94\x94\xe2\x94\x80 app.html\n\xe2\x94\x9c\xe2\x94\x80 js\n\xe2\x94\x82\xc2\xa0 \xe2\x94\x94\xe2\x94\x80 app.js\n\xe2\x94\x94\xe2\x94\x80 index.html\n

\n\n

现在您也已index.html在该dist目录中，并且可以简单地部署该dist目录，因为它是独立的。

\n\n

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

\n