Webpack配置 – 如何编译不同路径中的文件

huangapple
go评论105阅读模式
英文:

Webpack Config - how can I compiler file in difference path

问题

  1. 我有
  3.  - `./src` - 这是我的源文件（index.html，index.ts，style.scss）
  4.  - `./public` - 这是我的站点和编译器文件（index.html，bundle.js，style.css）
  6. 我想要构建我的 `./src` 文件中的 `index.html` 到 `./public/`，将我的 `index.ts` 构建到 `./public/success/script/index.js`，将 `style.scss` 构建到 `./public/success/style/style.css` 举个例子
  8. 我应该如何做呢？
  10. `webpack.config.js`:
  12. ```js
  13. const path = require('path');
  14. const HtmlWebpackPlugin = require('html-webpack-plugin');
  16. module.exports = {
  17.     entry: path.resolve(__dirname, './src/scripts/index.ts'),
  18.     mode: "development",
  19.     output: {
  20.         path: path.resolve(__dirname, './public/'),
  21.         filename: 'app.min.js',
  22.     },
  23.     devServer: {
  24.         static:{
  25.             directory: path.join(__dirname, './public')
  26.         },
  27.         port: 3000,
  28.         open: true,
  29.         hot: true
  30.     },
  31.     module: {
  32.         rules: [
  33.             {
  34.                 test: /\.ts|.js$/,
  35.                 use: ["ts-loader"],
  36.                 exclude: /node_modules/,
  37.             },
  38.             {
  39.                 test: /\.scss$/,
  40.                 use:[
  41.                     "sass-loader",
  42.                     "style-loader",
  43.                     "css-loader"
  44.                 ]
  45.             }
  46.         ]
  47.     },
  48.     plugins: [
  49.         new HtmlWebpackPlugin({
  50.             template: path.resolve(__dirname, './src/index.html'),
  51.             filename: path.resolve(__dirname, "./public/index.html"),
  52.             inject: "body"
  53.         }),
  54.     ],
  55. };
英文:

I have

  • ./src - it's my source files (index.html, index.ts, style.scss)
  • ./public - my site and compiler files (index.html, bundle.js, style.css)

and I wanna build my ./src files index.html into ./public/, my index.ts into ./public/success/script/index.js, and style.scss into ./public/success/style/style.css for exemple

how can I do that?

webpack.config.js:

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. module.exports = {
  5.     entry: path.resolve(__dirname, './src/scripts/index.ts'),
  6.     mode: "development",
  7.     output: {
  8.         path: path.resolve(__dirname, './public/'),
  9.         filename: 'app.min.js',
  10.     },
  11.     devServer: {
  12.         static:{
  13.             directory: path.join(__dirname,  './public')
  14.         },
  15.         port: 3000,
  16.         open: true,
  17.         hot: true
  18.     },
  19.     module: {
  20.         rules: [
  21.             {
  22.                 test: /\.ts|.js$/,
  23.                 use: ["ts-loader"],
  24.                 exclude: /node_modules/,
  25.             },
  26.             {
  27.                 test: /\.scss$/,
  28.                 use:[
  29.                     "sass-loader",
  30.                     "style-loader",
  31.                     "css-loader"
  32.                 ]
  33.             }
  34.         ]
  35.     },
  36.     plugins: [
  37.         new HtmlWebpackPlugin({
  38.             template: path.resolve(__dirname, './src/index.html'),
  39.             filename: path.resolve(__dirname, "./public/index.html"),
  40.             inject: "body"
  41.         }),
  42.     ],
  43. };

答案1

得分: 0

请注意，以下是翻译好的部分：

See output.filename configuration, you are allowed to use something like 'js/[name]/bundle.js' to create a folder structure.
查看 output.filename 配置，你可以使用类似 'js/[name]/bundle.js' 这样的方式来创建文件夹结构。

The filename of MiniCssExtractPlugin works like output.filename.
MiniCssExtractPlugin 的 filename 配置与 output.filename 类似。

In order to simplify the configuration, the following example does not use ts-loader and sass-loader as they do not affect the build output.
为了简化配置，以下示例不使用 ts-loader 和 sass-loader，因为它们不会影响构建输出。

Project structure(after building):
构建后的项目结构：

  1. $ tree -L 4 -I node_modules
  2. .
  3. ├── package-lock.json
  4. ├── package.json
  5. ├── public
  6. │   ├── index.html
  7. │   └── success
  8. │       ├── script
  9. │       │   └── index.js
  10. │       └── style
  11. │           └── style.css
  12. ├── src
  13. │   ├── index.html
  14. │   ├── index.js
  15. │   └── style.css
  16. └── webpack.config.js

src/index.js:
src/index.js：

  1. import './style.css';
  3. console.log('webpack mini template');

src/index.html:
src/index.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

src/style.css:
src/style.css：

  1. body {
  2. 	background: green;
  3. }

webpack.config.js:
webpack.config.js：

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5. module.exports = {
  6. 	entry: path.resolve(__dirname, './src/index.js'),
  7. 	mode: 'development',
  8. 	output: {
  9. 		path: path.resolve(__dirname, './public/'),
  10. 		filename: 'success/script/index.js',
  11. 		clean: true,
  12. 	},
  13. 	module: {
  14. 		rules: [
  15. 			{
  16. 				test: /\.css$/,
  17. 				use: [MiniCssExtractPlugin.loader, 'css-loader'],
  18. 			},
  19. 		],
  20. 	},
  21. 	plugins: [
  22. 		new HtmlWebpackPlugin({
  23. 			template: path.resolve(__dirname, './src/index.html'),
  24. 			inject: 'body',
  25. 		}),
  26. 		new MiniCssExtractPlugin({ filename: 'success/style/style.css' }),
  27. 	],
  28. };

Build logs:
构建日志：

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

Output:
输出：

public/index.html:
public/index.html：

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

package.json:
package.json：

  1. {
  2. 	"version": "1.0.0",
  3. 	"scripts": {
  4. 		"build": "webpack"
  5. 	},
  6. 	"devDependencies": {
  7. 		"css-loader": "^6.8.1",
  8. 		"html-webpack-plugin": "^5.5.3",
  9. 		"mini-css-extract-plugin": "^2.7.6",
  10. 		"webpack": "^5.80.0",
  11. 		"webpack-cli": "^5.0.2"
  12. 	}
  13. }
英文:

See output.filename configuration, you are allowed to use something like 'js/[name]/bundle.js' to create a folder structure.

The filename of MiniCssExtractPlugin works like output.filename.

In order to simplify the configuration, the following example does not use ts-loader and sass-loader as they do not affect the build output.

Project structure(after building):

  1. $ tree -L 4 -I node_modules
  2. .
  3. ├── package-lock.json
  4. ├── package.json
  5. ├── public
  6. │   ├── index.html
  7. │   └── success
  8. │       ├── script
  9. │       │   └── index.js
  10. │       └── style
  11. │           └── style.css
  12. ├── src
  13. │   ├── index.html
  14. │   ├── index.js
  15. │   └── style.css
  16. └── webpack.config.js

src/index.js:

  1. import './style.css';
  3. console.log('webpack mini template');

src/index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

src/style.css:

  1. body {
  2. 	background: green;
  3. }

webpack.config.js:

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5. module.exports = {
  6. 	entry: path.resolve(__dirname, './src/index.js'),
  7. 	mode: 'development',
  8. 	output: {
  9. 		path: path.resolve(__dirname, './public/'),
  10. 		filename: 'success/script/index.js',
  11. 		clean: true,
  12. 	},
  13. 	module: {
  14. 		rules: [
  15. 			{
  16. 				test: /\.css$/,
  17. 				use: [MiniCssExtractPlugin.loader, 'css-loader'],
  18. 			},
  19. 		],
  20. 	},
  21. 	plugins: [
  22. 		new HtmlWebpackPlugin({
  23. 			template: path.resolve(__dirname, './src/index.html'),
  24. 			inject: 'body',
  25. 		}),
  26. 		new MiniCssExtractPlugin({ filename: 'success/style/style.css' }),
  27. 	],
  28. };

Build logs:

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

Output:

public/index.html:

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

package.json:

  1. {
  2. 	"version": "1.0.0",
  3. 	"scripts": {
  4. 		"build": "webpack"
  5. 	},
  6. 	"devDependencies": {
  7. 		"css-loader": "^6.8.1",
  8. 		"html-webpack-plugin": "^5.5.3",
  9. 		"mini-css-extract-plugin": "^2.7.6",
  10. 		"webpack": "^5.80.0",
  11. 		"webpack-cli": "^5.0.2"
  12. 	}
  13. }

huangapple
  • 本文由 发表于 2023年7月31日 22:03:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/76804386.html
  • webpack
  • webpack-dev-server
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定