Webpack配置-我如何在不同的路径中编译文件

我有过

这是我的源文件（index.html，index.ts，style.scss）
./public-我的站点和编译器文件（index.html，bundle.js，style.css）

例如，我想将我的./src文件index.html构建为./public/，将我的index.ts构建为./public/success/script/index.js，将style.scss构建为./public/success/style/style.css
我怎么能做到呢？
webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, './src/scripts/index.ts'),
    mode: "development",
    output: {
        path: path.resolve(__dirname, './public/'),
        filename: 'app.min.js',
    },
    devServer: {
        static:{
            directory: path.join(__dirname,  './public')
        },
        port: 3000,
        open: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.ts|.js$/,
                use: ["ts-loader"],
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use:[
                    "sass-loader",
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: path.resolve(__dirname, "./public/index.html"),
            inject: "body"
        }),
    ],
};

字符串

请参阅output.filename配置，您可以使用类似'js/[name]/bundle.js'的东西来创建文件夹结构。
MiniCssExtractPlugin的filename的工作方式类似于output.filename。
为了简化配置，以下示例不使用ts-loader和sass-loader，因为它们不影响构建输出。
项目结构（建成后）：

$ tree -L 4 -I node_modules
.
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── success
│       ├── script
│       │   └── index.js
│       └── style
│           └── style.css
├── src
│   ├── index.html
│   ├── index.js
│   └── style.css
└── webpack.config.js

字符串
src/index.js：

import './style.css';

console.log('webpack mini template');

型
src/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

型
src/style.css：

body {
    background: green;
}

型
webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './public/'),
        filename: 'success/script/index.js',
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            inject: 'body',
        }),
        new MiniCssExtractPlugin({ filename: 'success/style/style.css' }),
    ],
};

型
构建日志：

> webpack

asset success/script/index.js 3.23 KiB [emitted] (name: main)
asset index.html 357 bytes [emitted]
asset success/style/style.css 242 bytes [emitted] (name: main)
Entrypoint main 3.46 KiB = success/style/style.css 242 bytes success/script/index.js 3.23 KiB
orphan modules 2.76 KiB (javascript) 937 bytes (runtime) [orphan] 7 modules
runtime modules 274 bytes 1 module
cacheable modules 111 bytes (javascript) 29 bytes (css/mini-extract)
  ./src/index.js 61 bytes [built] [code generated]
  ./src/style.css 50 bytes [built] [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./src/style.css 29 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 203 ms

型
输出量：
public/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<link href="success/style/style.css" rel="stylesheet"></head>
<body>
<script defer src="success/script/index.js"></script></body>
</html>

型
package.json：

{
    "version": "1.0.0",
    "scripts": {
        "build": "webpack"
    },
    "devDependencies": {
        "css-loader": "^6.8.1",
        "html-webpack-plugin": "^5.5.3",
        "mini-css-extract-plugin": "^2.7.6",
        "webpack": "^5.80.0",
        "webpack-cli": "^5.0.2"
    }
}

型

Webpack配置-我如何在不同的路径中编译文件

1条答案

相关问题

热门标签

最新问答