案例是拥有主文件夹'Projects'并在那里安装所有带有配置的webpack 4文件。在＆＃39;项目＆＃39;内文件夹是很多文件夹，例如'Project1', 'Project2', etc...我想从'node_modules'的入口点开始webpack.config.js，并自定义其他入口点，如./Project1/js/app.jsx，输出如./Project1/dist/js/main.js，与scss和index.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来操作它们并生成{{1生成所有文件的文件夹。
上面的配置表单编译时没有错误，但没有生成＆＃39; dist＆＃39; dist任何地方的文件夹，所以我不确定编译过程是否正确完成。
非常感谢任何建议和解决方案
答案 0 :(得分：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将添加另一个这样的行，因此它将加倍 - ＆gt;要删除的行。
运行使用： npm run build ， npm start