我正在使用 Visual Studio Code (VSC)， Webpack， devServer和 CleanWebpackPlugin。
运行buildd脚本时，dist文件夹将被删除，然后再次使用新文件重新构建。但是，在运行devServer时，dist文件夹已删除但未重建。
这会导致问题，看看launch.json中的webRoot应该如何让VSC中的调试代理知道在哪里寻找源文件和sourcemaps。删除dist文件夹时，找不到这些文件。可以通过查看调试控制台中的.scripts命令来验证这一点。
如下所示，Sourcemaps正确地映射到源，但是顶行缺少服务器与所使用的文件之间的连接。当我删除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
}
});
启动
{
"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"
}
}
.script在不起作用时输出（即使用CleanWebPackPlugin）。请参阅缺少括号的顶线，显示缺乏连接）
› extensions::app
› http://localhost:8080/scripts/app.bundle.js
- webpack:///webpack/bootstrap a59d0d75ae8a9271e6c6 (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappwebpackbootstrap a59d0d75ae8a9271e6c6)
- webpack:///(webpack)/buildin/global.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)buildinglobal.js)
- webpack:///(webpack)/buildin/module.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)buildinmodule.js)
- webpack:///./node_modules/html-entities/lib/html5-entities.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_moduleshtml-entitieslibhtml5-entities.js)
- webpack:///(webpack)-dev-server/client (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)-dev-serverclient)
- webpack:///./node_modules/url/url.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesurlurl.js)
- webpack:///./node_modules/punycode/punycode.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulespunycodepunycode.js)
- webpack:///./node_modules/url/util.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesurlutil.js)
- webpack:///./node_modules/querystring-es3/index.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesquerystring-es3index.js)
- webpack:///./node_modules/querystring-es3/decode.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesquerystring-es3decode.js)
- webpack:///./node_modules/querystring-es3/encode.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesquerystring-es3encode.js)
- webpack:///./node_modules/strip-ansi/index.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesstrip-ansiindex.js)
- webpack:///./node_modules/ansi-regex/index.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesansi-regexindex.js)
- webpack:///./node_modules/loglevel/lib/loglevel.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesloglevellibloglevel.js)
- webpack:///(webpack)-dev-server/client/socket.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)-dev-serverclientsocket.js)
- webpack:///./node_modules/sockjs-client/dist/sockjs.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulessockjs-clientdistsockjs.js)
- webpack:///(webpack)-dev-server/client/overlay.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)-dev-serverclientoverlay.js)
- webpack:///./node_modules/ansi-html/index.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesansi-htmlindex.js)
- webpack:///./node_modules/html-entities/index.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_moduleshtml-entitiesindex.js)
- webpack:///./node_modules/html-entities/lib/xml-entities.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_moduleshtml-entitieslibxml-entities.js)
- webpack:///./node_modules/html-entities/lib/html4-entities.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_moduleshtml-entitieslibhtml4-entities.js)
- webpack:///(webpack)/hot nonrecursive ^./log$ (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)hot nonrecursive ^log$)
- webpack:///(webpack)/hot/log.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)hotlog.js)
- webpack:///(webpack)/hot/emitter.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)hotemitter.js)
- webpack:///./node_modules/events/events.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_moduleseventsevents.js)
- webpack:///./src/scripts/app.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappsrcscriptsapp.js)
- webpack:///./node_modules/lodash/lodash.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_moduleslodashlodash.js)
- webpack:///./src/scripts/print.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappsrcscriptsprint.js)
.script输出，而无需清洁韦布帕克普林（工作。请参阅顶行）
› extensions::app
› http://localhost:8080/scripts/app.bundle.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappdistscriptsapp.bundle.js)
- webpack:///webpack/bootstrap beb4052598d0b44b1967 (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappwebpackbootstrap beb4052598d0b44b1967)
- webpack:///./src/scripts/app.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappsrcscriptsapp.js)
- webpack:///./node_modules/process/browser.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_modulesprocessbrowser.js)
- webpack:///./node_modules/lodash/lodash.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappnode_moduleslodashlodash.js)
- webpack:///(webpack)/buildin/global.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)buildinglobal.js)
- webpack:///(webpack)/buildin/module.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebapp(webpack)buildinmodule.js)
- webpack:///./src/styles/style.scss (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappsrcstylesstyle.scss)
- webpack:///./src/scripts/print.js (c:UsersmagnusgaDownloadsProgrammingTestProgramsmyWebappsrcscriptsprint.js)
首先，我是Webpack的新手。
当我阅读WebPack GitHub问题时，我认为WebPack-Dev-Server不会写入磁盘，而是运行插件。因此，您的问题出现了，Cleanwebpackplugin被打来了，但是没有写入磁盘，这似乎从未重建。考虑到这一点，我们可以重新排列代码。
另外，这是另一件事，我们需要在此处使用WebPack.config.js Github中的脚本使用 - hot- inline