Webpack 4 配置入口点和输出（每个项目文件夹中生成的dist文件夹）
Posted
技术标签:
【中文标题】Webpack 4 配置入口点和输出（每个项目文件夹中生成的dist文件夹）【英文标题】：Webpack 4 configuring entry points and outputs (dist folder generated in each project folder) 【发布时间】：2018-10-30 19:32:46 【问题描述】：案例是有主文件夹'Projects' 并在那里安装了所有带有配置的 webpack 4 文件。在“项目”文件夹中有许多文件夹，例如 'Project1', 'Project2', etc...我想从 webpack.config.js 所在的 'node_modules' 入口点开始，并在那里自定义更多入口点，如 ./Project1/js/app.jsx，输出如 ./Project1/dist/js/main.js，与 scss 和索引相同.html，全部在'dist' 文件夹中生成。问题是始终只在主 'Projects' 文件夹中安装一次 node_modules。
package.json：
"name": "webpack4_example",
"version": "1.0.0",
"main": "index.js",
"browserslist": ["last 2 versions"],
"scripts":
"build": "webpack --mode production",
"watch": "webpack --watch --mode development",
"start": "webpack-dev-server --open --mode development"
,
"devDependencies":
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
webpack.config.js：
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
entry: './Project1/js/app.jsx', // customized entry point
output:
path: path.resolve(__dirname, 'dist'),
filename: './js/out.js' // generated ./Project1/dist/js/out.js
,
watch: true,
module:
rules: [
test: /\.js$/,
exclude: /node_modules/,
use:
loader: 'babel-loader'
,
test: /\.html$/,
use: [
loader: 'html-loader',
options: minimize: true
]
,
test: /\.(png|jpe?g)/i,
use: [
loader: 'url-loader',
options:
name: './img/[name].[ext]',
limit: 10000
,
loader: 'img-loader'
]
,
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
]
,
plugins: [
new HtmlWebPackPlugin(
template: './Project1/index.html', // not sure how to set these sections
filename: 'index.html'
),
new MiniCssExtractPlugin(
filename: '[name].css',
chunkFilename: '[id].css'
)
]
;
.babelrc:
"presets": ["env", "react", "stage-2"]
据我了解，没有自定义入口点的 webpack 默认会搜索 'Projects/src/...' 以查找所有文件，如 scss、js、img、index.html、index.js 以对它们进行操作，并将生成 'Projects/dist' 文件夹生成的所有文件。
上面的配置表单编译没有错误，但不会在任何地方生成“dist”文件夹，所以我不确定编译过程是否正确完成。
不胜感激任何建议和解决方案
【问题讨论】：
好的，似乎 package.json 中的 'scripts' 部分可能有助于覆盖默认输入/输出：“scripts”：“dev”：“webpack --mode development ./foo/ src/js/index.js --output ./foo/main.js", "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js " 【参考方案1】：解决方案（更新：添加工作观看文件）：
好的，我已经成功了（起点是安装node_modules 和其他webpack4 配置文件的位置，这里是Projects 主文件夹）
Projects
|__Project1
| |__js
| | |__app.jsx
| |__dist //desirable result, generated dist folder
| | |__* //all generated folders/files html, js, css, img
| |__index.ejs //renamed from index.html
|
|__Project2 //etc, project folders
|
|__src // if without customized entry points it's default source
| |__folders like /_scss, /img, /js
| |__index.js
| |__index.ejs //renamed index.html, used when no customized
| //entry points are set, same as for all /src
|
|__node_modules
|__.babelrc
|__package.json
|__webpack.config.js
.babelrc 不变，和上一篇一样
在此示例中，Projects 文件夹通常创建 src 文件夹，其中所有文件/文件夹都通过 webpack4 传递，/src/index.js 中的文件必须存在，用于导入其他文件
index.js 示例
import style from "./_scss/main.scss"; //paths for Projects/src/...
import style from "./main.css";
package.json
"name": "webpack4_example",
"version": "1.0.0",
"main": "index.js", // the file explained just above
"browserslist": ["last 2 versions"],
"scripts":
"dev": "webpack --mode development ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
"build": "webpack --mode production ./Project1/js/app.jsx --output ./Project1/dist/js/main.js",
"watch": "webpack --watch --mode development",
"start": "webpack-dev-server --mode development --open --watch-content-base ./Project1/js/app.jsx" //watching desired files changes live in browser
,
"devDependencies":
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"sass-loader": "^7.0.1",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
其中--mode production | developement | none 表示dist 文件夹中的输出文件的格式优化或不进行此类优化，以方便使用none
webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports =
module:
rules: [
test: /\.(js$|jsx$)/,
exclude: /node_modules/,
use:
loader: 'babel-loader'
,
test: /\.html$/,
use: [
loader: 'html-loader',
options: minimize: true
]
,
test: /\.(png|jpe?g)/i,
use: [
loader: 'url-loader',
options:
name: './img/[name].[ext]',
limit: 10000
,
loader: 'img-loader'
]
,
test: /\.(css$|scss$)/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
]
,
plugins: [
new HtmlWebPackPlugin(
template: './Project1/index.ejs', // entry point for html
filename: 'index.html'
),
new MiniCssExtractPlugin(
filename: '[name].css',
chunkFilename: '[id].css'
)
],
watchOptions: //added to make possible watch files
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 1000
;
index.html 的自定义入口点，其中.html 扩展名更改为.ejs，以解决html-loader 和html-webpack-plugin 之间引起的一些问题。使用 .ejs 输出的 html，也自动放置在 dist 文件夹中，没有优化格式并且是可读的。注意 html.ejs 是否包含带有 [out].js 文件的固定路径的标签（这里是在 dist 文件夹中生成的文件）。从 dist 文件夹生成的 index.html 将添加另一个这样的行，因此它将被加倍 -> 要删除的行。
用于运行：npm run build、npm start
【讨论】：
以上是关于Webpack 4 配置入口点和输出（每个项目文件夹中生成的dist文件夹）的主要内容，如果未能解决你的问题，请参考以下文章