node.js - webpack-dev-server 不会在启动时创建初始包
问题描述
我已经构建了一个从 git 克隆的基本 babel webpack 启动项目。git 存储库没有 dest/output/build 文件夹,也没有任何初始构建文件。我知道 webpack,所以我假设在webpack-dev-server
启动时它会创建一个文件夹(在我的情况下为“build”)并首次编译源文件。相反,我被迫手动启动该过程,然后在初始编译之后webpack-dev-server
编译更改。
我错过了什么?
包.json
{
"name": "babel-webpack-starter",
"version": "1.0.0",
"description": "A Babel Webpack Stater Pack for compiling ES2015/ES6, ES2016/ES7 and ES2017 code doen to ES5. This will allow for the use of ES6 modules and later ECMAScript features such as async/await. Also includes a webpack-dev-server to auto load server without having to re-compile.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development",
"start": "webpack-dev-server --output-public-path=/build/ --mode=development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.16.4",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
webpack.config.js
// Load Node modules
const path = require('path');
// Export modules
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: '/node_modules',
loader: 'babel-loader',
query: {
presets: ['env']
}
}]
}
};
解决方案
webpack-dev-server
不会把你app.bundle.js
放在你的工作目录中,它会在内存中编译你的文件。
如果您想访问文件,请将公共路径添加到输出选项或您在npm start
脚本中完成的路径。
output: {
...
publicPath: '/build/'
}
现在,您的文件将在localhost:<port>/build/app.bundle.js
您可以查看此网站以获取更多信息
推荐阅读
- java - 无法从 Firebase(Cloud Firestore 数据库)获取数据
- go - 并发写入 websocket 连接
- javascript - Formik 的价值观问题
- docker - 如何在 docker build 期间挂载共享卷?
- javascript - 如何测试 Node.js 应用程序是否能够启动
- python - 如何在 Google colab 中将 helper.py 上传到 Tensorflow 2.0 笔记本
- excel - 根据单元格中的数字多次重复前一行的公式
- ruby-on-rails - 用should测试多个关联,应该属于使用外键
- amazon-ec2 - 无法通过用户数据命令将我现有的 EBS 卷(数据驱动器)附加到新启动的 EC2 实例 (RHEL 8)
- linux - 无法使用ffmpeg并排同步来自两个网络摄像头流的帧