我正在使用Visual Studio Code (VSC) Webpack，devServer和CleanWebpackPlugin。
运行buildd脚本时，dist文件夹将被删除，然后使用新文件重新进行重建。但是，在运行devServer时，dist文件夹将被删除但不会重建。
这会导致一个问题，看看webRoot中的launch.json应该让VSC中的调试代理知道在哪里查找源文件和源图。删除dist文件夹时，找不到这些文件。这可以通过查看调试控制台中的.scripts命令来验证。
如下所示，源图正确映射到源，但顶行缺少服务器与其服务的文件之间的连接。当我删除CleanWebpackPlugin时，它可以工作（请参见最底部的.script输出）。
相关文件
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: './src/scripts/app.js'
},
plugins: [
new CleanWebpackPlugin(['dist'],{
}),
new HtmlWebpackPlugin({
title: 'Production'
}),
new ExtractTextPlugin({
filename: "styles/[name].css"
})
],
output: {
filename: 'scripts/[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'source-map',
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: false,
port: 8080
}
});
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}/dist/scripts",
"sourceMapPathOverrides": {
"webpack:///*": "${workspaceRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///./~/*": "${webRoot}/node_modules/*"
}
}
]
}
的package.json
{
"name": "mywebapp",
"version": "1.0.0",
"description": "\"My first Webapp\"",
"main": "./src/scripts/app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"buildd": "webpack --config webpack.dev.js",
"buildp": "webpack -p --config webpack.prod.js",
"watch": "webpack --progress --watch --config webpack.dev.js",
"startd": "webpack-dev-server --open --config webpack.dev.js",
"startp": "webpack-dev-server --open --config webpack.prod.js",
"hts": "http-server ./dist",
"compile": "babel src --out-dir dist --source-maps --watch",
"sass": "sass --watch src/styles:dist/styles"
},
"keywords": [
"webapp"
],
"author": "MRG",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.0.0-beta.2",
"jquery": "^3.2.1",
"lodash": "^4.17.4"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.34",
"@babel/preset-env": "^7.0.0-beta.34",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.17",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^2.30.1",
"node-sass": "^4.7.2",
"postcss-loader": "^2.0.9",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^1.1.3",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.1.1"
}
}
.scripts输出时不起作用（即使用CleanWebpackPlugin）。见顶部缺少括号，显示缺少连接）
› extensions::app
› http://localhost:8080/scripts/app.bundle.js
- webpack:///webpack/bootstrap a59d0d75ae8a9271e6c6 (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\webpack\bootstrap a59d0d75ae8a9271e6c6)
- webpack:///(webpack)/buildin/global.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)\buildin\global.js)
- webpack:///(webpack)/buildin/module.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)\buildin\module.js)
- webpack:///./node_modules/html-entities/lib/html5-entities.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\html-entities\lib\html5-entities.js)
- webpack:///(webpack)-dev-server/client (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)-dev-server\client)
- webpack:///./node_modules/url/url.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\url\url.js)
- webpack:///./node_modules/punycode/punycode.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\punycode\punycode.js)
- webpack:///./node_modules/url/util.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\url\util.js)
- webpack:///./node_modules/querystring-es3/index.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\querystring-es3\index.js)
- webpack:///./node_modules/querystring-es3/decode.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\querystring-es3\decode.js)
- webpack:///./node_modules/querystring-es3/encode.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\querystring-es3\encode.js)
- webpack:///./node_modules/strip-ansi/index.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\strip-ansi\index.js)
- webpack:///./node_modules/ansi-regex/index.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\ansi-regex\index.js)
- webpack:///./node_modules/loglevel/lib/loglevel.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\loglevel\lib\loglevel.js)
- webpack:///(webpack)-dev-server/client/socket.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)-dev-server\client\socket.js)
- webpack:///./node_modules/sockjs-client/dist/sockjs.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\sockjs-client\dist\sockjs.js)
- webpack:///(webpack)-dev-server/client/overlay.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)-dev-server\client\overlay.js)
- webpack:///./node_modules/ansi-html/index.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\ansi-html\index.js)
- webpack:///./node_modules/html-entities/index.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\html-entities\index.js)
- webpack:///./node_modules/html-entities/lib/xml-entities.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\html-entities\lib\xml-entities.js)
- webpack:///./node_modules/html-entities/lib/html4-entities.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\html-entities\lib\html4-entities.js)
- webpack:///(webpack)/hot nonrecursive ^\.\/log$ (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)\hot nonrecursive ^\log$)
- webpack:///(webpack)/hot/log.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)\hot\log.js)
- webpack:///(webpack)/hot/emitter.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)\hot\emitter.js)
- webpack:///./node_modules/events/events.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\events\events.js)
- webpack:///./src/scripts/app.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\src\scripts\app.js)
- webpack:///./node_modules/lodash/lodash.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\lodash\lodash.js)
- webpack:///./src/scripts/print.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\src\scripts\print.js)
.script输出没有CleanWebpackPlugin（Works。见顶行）
› extensions::app
› http://localhost:8080/scripts/app.bundle.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\dist\scripts\app.bundle.js)
- webpack:///webpack/bootstrap beb4052598d0b44b1967 (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\webpack\bootstrap beb4052598d0b44b1967)
- webpack:///./src/scripts/app.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\src\scripts\app.js)
- webpack:///./node_modules/process/browser.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\process\browser.js)
- webpack:///./node_modules/lodash/lodash.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\node_modules\lodash\lodash.js)
- webpack:///(webpack)/buildin/global.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)\buildin\global.js)
- webpack:///(webpack)/buildin/module.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\(webpack)\buildin\module.js)
- webpack:///./src/styles/style.scss (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\src\styles\style.scss)
- webpack:///./src/scripts/print.js (c:\Users\magnusga\Downloads\Programming\TestPrograms\myWebapp\src\scripts\print.js)
答案 0 :(得分：0)
首先，我是Webpack的新手。
当我阅读webpack github问题时，我认为webpack-dev-server不会写入磁盘，但会运行插件。所以这就是你的问题，CleanWebpackPlugin被调用，但没有写入磁盘，这似乎永远不会重建。记住这一点，我们可以重新安排代码。
另外，这是另一件重要的事情，我们需要使用--hot --inline with script而不是webpack.config.js Github issue here