我正在尝试将CleanWebpackPlugin添加到我的webpack版本中。当我将CleanWebpackPlugin添加到插件列表中时，它会成功删除dist /文件夹，但是我的webpack构建无法重建dist文件夹。如果我的插件列表中未包含CleanWebpackPlugin并手动删除dist /文件夹，则webpack将成功重建dist /文件夹。为什么CleanWebpackPlugin禁止webpack重建dist /文件夹，我该如何解决？谢谢！
webpack.config.js：
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");
let pathsToClean = [
DIST_DIR
];
let cleanOptions = {
verbose: true
};
const config = {
entry: [
"babel-polyfill",
SRC_DIR + "/app/index.js",
SRC_DIR + "/app/assets/stylesheets/application.scss",
],
output: {
path: DIST_DIR + "/app/",
filename: "bundle.js",
publicPath: "/app/"
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
historyApiFallback: true,
hot: true,
proxy: {
'/api': {
target: 'http://localhost:5001',
secure: false,
},
}
},
module: {
rules: [
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "eslint-loader",
options: {
failOnWarning: false,
failOnError: true
}
},
{
test: /\.js$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'stage-2']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader?importLoaders=1',
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
},
}],
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// loader: "url?limit=10000"
use: "url-loader"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
use: 'file-loader'
},
]
},
plugins: [
new ExtractTextPlugin({
filename: "application.css",
allChunks: true
}),
new CleanWebpackPlugin(pathsToClean, cleanOptions),
]
};
module.exports = config;
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"watch": "webpack --progress --watch",
"start": "npm run build",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --inline --hot --history-api-fallback",
"build:dev": "webpack && cp src/index.html dist/index.html",
"build:prod": "webpack -p && cp src/index.html dist/index.html"
},
"author": "",
"license": "UNLICENSED",
"devDependencies": {
"babel-cli": "7.0.0-beta.3",
"babel-eslint": "7",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"eslint": "3.x",
"eslint-config-airbnb": "^15.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^3.0.0",
"fetch-mock": "^6.0.0-beta.7",
"file-loader": "^0.11.2",
"image-webpack-loader": "^3.4.2",
"jest": "^23.1.0",
"jest-enzyme": "^4.0.0",
"jest-fetch-mock": "^1.6.4",
"node-sass": "^4.9.0",
"redux-mock-store": "^1.5.3",
"sass-loader": "^6.0.6",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"@trendmicro/react-toggle-switch": "^0.5.7",
"babel-polyfill": "^6.26.0",
"cross-fetch": "^1.1.1",
"font-awesome": "^4.7.0",
"highcharts": "^6.0.4",
"history": "^4.7.2",
"js-cookie": "^2.2.0",
"less-loader": "^4.0.5",
"libphonenumber-js": "^0.4.42",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"prop-types": "^15.6.0",
"query-string": "^5.0.1",
"rc-time-picker": "^3.1.0",
"react": "^16.0.0",
"react-animations": "^1.0.0",
"react-autosuggest": "^9.3.4",
"react-circular-progressbar": "^0.8.0",
"react-datepicker": "^0.59.0",
"react-dom": "^16.0.0",
"react-highcharts": "^15.0.0",
"react-list": "^0.8.8",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.6",
"react-select": "^1.0.0-rc.10",
"react-transition-group": "^1.2.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"styled-components": "3.2.3",
"twilio-client": "^1.4.33"
},
"jest": {
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
}
}
堆栈跟踪：
jimmy:bei-bei/ (webpack_enhancements_v1) $ ys [13:06:46]
yarn run v1.6.0
$ npm run build
> bei-bei@1.0.0 build /Users/jemery/dev/bei-bei
> webpack -d && cp src/index.html dist/index.html && webpack-dev-server --inline --hot --history-api-fallback
Hash: 93182bb3b389691fad05
Version: webpack 3.7.1
Time: 22822ms
Asset Size Chunks Chunk Names
674f50d287a8c48dc19ba404d20fe713.eot 166 kB [emitted]
b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted]
912ec66d7572ff821749319396470bde.svg 444 kB [emitted] [big]
images/_/app/assets/images/bei-bei.png 2.94 kB [emitted]
bundle.js 14.3 MB 0 [emitted] [big] main
application.css 396 kB 0 [emitted] [big] main
[41] (webpack)/buildin/global.js 509 bytes {0} [built]
[102] ./src/app/actions/users.js 3.54 kB {0} [built]
[474] multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/styles.scss font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css @trendmicro/react-toggle-switch/dist/react-toggle-switch.css 124 bytes {0} [built]
[676] ./src/app/index.js 1.67 kB {0} [built]
[725] ./src/app/reducers/index.js 3.14 kB {0} [built]
[741] ./src/app/reducers/ui.js 8.18 kB {0} [built]
[742] ./src/app/reducers/users.js 1.47 kB {0} [built]
[743] ./src/app/reducers/search.js 1.3 kB {0} [built]
[744] ./src/app/reducers/schools.js 4.35 kB {0} [built]
[745] ./src/app/reducers/statuses.js 4.55 kB {0} [built]
[746] ./src/app/reducers/table.js 8.71 kB {0} [built]
[747] ./src/app/reducers/terms.js 4.49 kB {0} [built]
[748] ./src/app/reducers/trays.js 17.5 kB {0} [built]
[749] ./src/app/routes.js 6.49 kB {0} [built]
[1246] ./src/app/assets/stylesheets/application.scss 41 bytes {0} [built]
+ 1238 hidden modules
WARNING in ./src/app/actions/prospect.js
/Users/jemery/dev/bei-bei/src/app/actions/prospect.js
1:8 warning 'constants' is defined but never used no-unused-vars
✖ 1 problem (0 errors, 1 warning)
@ ./src/app/components/prospect/prospectContainer.js 19:16-49
@ ./src/app/components/prospects/prospectsRoutes.js
@ ./src/app/routes.js
@ ./src/app/index.js
@ multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/styles.scss font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css @trendmicro/react-toggle-switch/dist/react-toggle-switch.css
...
✖ 4 problems (0 errors, 4 warnings)
@ ./src/app/components/reports/callReportContainer.js 61:22-63
@ ./src/app/components/reports/reports.js
@ ./src/app/routes.js
@ ./src/app/index.js
@ multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/styles.scss font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css @trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?importLoaders=1!node_modules/react-datepicker/dist/react-datepicker.css:
2 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?importLoaders=1!node_modules/rc-time-picker/assets/index.css:
2 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?importLoaders=1!node_modules/react-circular-progressbar/dist/styles.css:
2 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js?importLoaders=1!node_modules/@trendmicro/react-toggle-switch/dist/react-toggle-switch.css:
2 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!node_modules/font-awesome/scss/font-awesome.scss:
Asset Size Chunks Chunk Names
674f50d287a8c48dc19ba404d20fe713.eot 166 kB [emitted]
b06871f281fee6b241d60582ae9369b9.ttf 166 kB [emitted]
912ec66d7572ff821749319396470bde.svg 444 kB [emitted] [big]
8 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!src/app/components/styles.scss:
2 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!src/app/assets/stylesheets/application.scss:
[0] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/app/assets/stylesheets/application.scss 101 kB {0} [built]
+ 1 hidden module
Project is running at http://localhost:8080/
webpack output is served from /app/
Content not from webpack is served from ./dist
404s will fallback to /index.html
答案 0 :(得分：1)
我相信它会发生，因为顺序是：
尝试添加：
let cleanOptions = {
exclude: ['bundle.js'],
};