Question

我是Webpack的新手（2）所以请原谅我迄今为止的简单理解。

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

基本上，我正在尝试将SCSS转换为CSS，将Pug转换为HTML并将JS转换为Babel＆＃39; JS。

当我运行dist命令时，它会生成文件，但同时也会生成 .scs 和的 .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提供一个入口点，然后将不同文件类型的输出设置为相应的目录。对于output.filename选项的JavaScript，您需要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

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

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

Answer 2

根据我的理解，每个入口点都有一个输出（this似乎暗示了这一点）。我相信最常见的用例是只有一个入口点（通常是app.js或index.js），并且所有必需的文件（如css和其他js文件）都是“require d” app.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参数指定每个加载器的输出目录和文件名。

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

2 个答案: