Trung tâm cá nhân
sách gpt4 ai đã đi

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

In lại 作者：行者123 更新时间：2023-12-02 23:12:03 28 4
mua khóa gpt4 Nike

Đây là của tôiwebpack.prod.config.jsMã số

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 脚本

"tập lệnh": {
    "start": "webpack-dev-server --config webpack.dev.config.js",
    "build": "webpack --config webpack.prod.config.js",
},
<小时>

chạyyarn 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 中的代码 文件应该是这样的



  <đầu>
    
    APP TITLE

1 Câu trả lời

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

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 - 如何将javascript文件输出到 'static/js'目录并将css文件输出到 'static/css'目录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57315749/

28 4 0
Bài viết được đề xuất: javascript - 类型错误 ('Router.use() requires a middleware function but got a ' + gettype(fn)) FeathersJS
Bài viết được đề xuất: javascript - Redux 表单字段级验证在 Edge 中不起作用
Bài viết được đề xuất: javascript - Google 跟踪代码管理器以及使用触发器或标记排序
Bài viết được đề xuất: javascript - 如何使用响应式(Reactive)表单向表单添加新控件而不出现错误 : "ERROR InternalError: "too much recursion"?
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com