如何将 javascript 个文件输出到 'static/js' 目录，将 css 个文件输出到 'static/css' 目录

Question

这是我的webpack.prod.config.js代码

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv').config({path: path.join(__dirname, '.env')});
const HWP = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: path.join(__dirname, '/src/index.jsx'),
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules:[
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]___[hash:base64:5]"
            },
          },
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenv.parsed)
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash].css',
    }),
    new HWP({
      template: path.join(__dirname,'/src/index.html'),
      minify: {
        collapseWhitespace: true
      }
    })
  ],
  optimization: {
    minimizer: [
      new TerserJSPlugin({}),
      new OptimizeCssAssetsPlugin({})
    ]
  },
  output: {
    filename: 'build.[contenthash].js',
    path: path.join(__dirname, '/dist'),
    publicPath: '/'
  }
};

这是我的 yarn 脚本

"scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js",
},

在我运行 yarn build 之后 dist 文件夹结构如下所示：

dist
├── build.c8bf456f14ce9fd024e4.js
├── 0.build.c42e9b89038bc14ee0d4.js
├── 1.build.155be64c26ba718adc27.js
├── main.58bf75b767e0f1d8310f.css
├── 0.c760db0e4330f75ffd4e.css
├── 1.68f70729629baaa5f35b.css
└── index.html

但我想将所有 css 文件放入 static/css 目录并将所有 javascript 文件放入 static/js 目录。当然 static/css 目录和 static/js 目录都应该在 dist 文件夹中。使 dist 文件夹结构如下所示：

dist
├── static
│   ├── js
│   │   ├── build.c8bf456f14ce9fd024e4.js
│   │   ├── 0.build.c42e9b89038bc14ee0d4.js
│   │   └── 1.build.155be64c26ba718adc27.js
│   ├── css
│   │   ├── main.58bf75b767e0f1d8310f.css
│   │   ├── 0.c760db0e4330f75ffd4e.css
│   └── └── 1.68f70729629baaa5f35b.css
└── index.html

当然，index.html 文件应该具有到主 javascript 文件的正确路径和到主 css 文件的正确路径。所以如果主 javascript 文件的名称是 build.c8bf456f14ce9fd024e4.js 并且主 css 文件的名称是 main.58bf75b767e0f1d8310f.css 那么 index.html 文件中的代码应该是这样的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>APP TITLE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/css/main.58bf75b767e0f1d8310f.css" rel="stylesheet"> 
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/build.c8bf456f14ce9fd024e4.js"></script>
  </body>
</html>

Answer 1

这可能会有帮助，但我在您的配置中没有看到 js 文件的块？

new MiniCssExtractPlugin({
  filename: 'css/[name].[contenthash].css',
  chunkFilename: 'css/[id].[contenthash].css',
}),

output: {
  filename: 'js/build.[contenthash].js',
  path: path.join(__dirname, '/dist'),
  chunkFilename: 'js/[name].[contenthash].js', // ?
  publicPath: '/'
}

如何将 javascript 个文件输出到 'static/js' 目录，将 css 个文件输出到 'static/css' 目录

How to output javascript files into 'static/js' directory and css files into 'static/css' directory

javascript

build

webpack

yarnpkg

webpack-4