Question

我正在使用lynda“ Reactjs基本培训”来开发一个关于react js的新项目。问题是，当我运行“ npm start”命令时，它会成功编译我的项目，但是既未创建“资产”目录也未创建“ bundle.js”，为什么？

我使用了修改后的“ webpack.config.js”，它与培训练习文件的区别在于所提供的文件对我不起作用。下面是代码：

.babelrc
--------
{
"presets": ["@babel/preset-env","@babel/react"]
}

package.json
------------
{
"name": "react-essential",
"version": "1.0.0",
"description": "A project focusing on React and related tools",
"main": "index.js",
"dependencies": {
"@babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-react-native": "^5",
"webpack": "^4.28.3",
"webpack-cli": "^3.1.2",
 "webpack-dev-server": "^3.1.14"
},
"scripts": {
"start": "./node_modules/.bin/webpack-dev-server"
},
"author": "Muhammad Waqas",
"license": "MIT"
}

webpack.config.js
-----------------
var webpack = require("webpack");
module.exports = {
entry: __dirname + "/src/index.js",
output: {
    path: __dirname + "/dist/assets",
    filename: "bundle.js",
    publicPath: "assets"
},
devServer: {
    inline: true,
    contentBase: __dirname + "/dist",
    port: 3000
},
module: {
    rules: [{
        test: /\.js$/,
        loader: ["babel-loader"]
    }]
}
}

每当我运行“ npm start”，它都应该启动webpack-dev-server，并且更改（如果有）应该反映在浏览器中。

Answer 1

webpack开发服务器未写入磁盘。它从内存中服务。如果您希望创建一个生产版本，并将其输出到资产文件夹，则需要添加一个运行脚本。

将以下构建脚本添加到package.json文件中，在启动脚本之后，顺序无关紧要：

"start": "./node_modules/.bin/webpack-dev-server", "build": "./node_modules/.bin/webpack --config webpack.config.js",

然后，您可以在命令行上运行以下命令以创建内部版本

npm run build

就像跑步一样

npm run start

Answer 2

webpack开发服务器未将任何资产写入磁盘。它从内存中为他们提供服务。

运行'npm start'之后，命令项目可以正确编译，但是不能使用bundle.js创建资产文件夹？

2 个答案: