Fatal编程技术网
  • javascript/
  • 如何将javascript文件输出到'；静态/js'；将目录和css文件放入'；静态/css'；目录

如何将javascript文件输出到'；静态/js'；将目录和css文件放入'；静态/css'；目录

javascript webpack build

如何将javascript文件输出到'；静态/js'；将目录和css文件放入'；静态/css'；目录,javascript,webpack,build,yarnpkg,webpack-4,Javascript,Webpack,Build,Yarnpkg,Webpack 4,这是我的webpack.prod.config.jscode 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

这是我的
webpack.prod.config.js
code

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: '/'
  }
};
这是我的故事剧本

"scripts": {
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js",
},
运行
warn 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

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
但是我想将所有css文件放入
static/css
目录，并将所有javascript文件放入
static/js
目录。当然，
static/css
目录和
static/js
目录都应该在
dist
文件夹中。要使
dist
文件夹结构如下所示：

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

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>


应用程序标题
这可能会有所帮助，但我在您的配置中没有看到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: '/'
}
当我使用你的代码时，我得到了一个错误，构建失败。但是当我将属性
chunkFilename
的值更改为
js/[name].[contenthash].js
或
js/[name].[chunkhash].js
时，构建成功完成，没有任何错误。