项目文件夹中没有创建Webpack dist文件夹？

Question

项目文件夹中没有创建Webpack dist文件夹？

22

一切正常运行，但找不到我的dist文件夹。我按照文档使用publicPath，但似乎dist文件夹仍然从内存中生成。

这可能是一个小问题，我对webpack不是很熟悉。任何帮助都可以。

下面是我的webpack.config.js文件：

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname,'dist'),
        filename: "[name].js",
        publicPath:'/dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html'
        })
    ],
    module: {
        loaders: [
            {
                test: /\.css$/, loader: "style-loader!css-loader"
            },
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
                loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react', 'stage-2']
                }
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
        stats:'error-only'
    }
};

我的 package.json 文件是

{
  "name": "tryout",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha './tests/**/*.test.js' --compilers js:babel-core/register --recursive",
    "start-dev-server": "webpack-dev-server --content-base dist/ --port 6969",
    "s": "npm run start-dev-server",
    "test:watch": "npm test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-2": "^6.13.0",
    "es6-promise": "^3.2.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.15.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.1",
    "react-router-redux": "^4.0.5",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "babel-register": "^6.11.6",
    "css-loader": "^0.23.1",
    "enzyme": "^2.4.1",
    "expect": "^1.20.2",
    "mocha": "^3.0.2",
    "nock": "^8.0.0",
    "react-addons-test-utils": "^15.3.1",
    "redux-mock-store": "^1.1.4",
    "style-loader": "^0.13.1"
  }
}

- Pradeep Jaiswar

“publicPath”被多个Webpack插件用于在生成生产构建时更新CSS、HTML文件中的URL。因此，它不会对您的开发环境产生任何影响。https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.1j9bauc10 - erichardson30

我能够通过webpack -p在本地创建dist文件夹。但是这在本地上不起作用，因为它只会创建分发代码，而不会随着服务器启动和指向dist文件夹。这是否可以在本地机器上实现？ - Pradeep Jaiswar

2个回答

1

设置 devServer:{ writeToDisk: true } 不再被支持。

近期的解决方案是在你的 package.json 中添加 "build": "webpack --config webpack.dev.config.js"。确保你的 Webpack 配置文件中的 output 参数如下所示：

output: {filename: "[name].bundle.js", path: path.resolve(__dirname, "./dist"), publicPath: ""}

现在打开终端并运行 npm run build，完成啦！你的 dist 文件夹应该出现在你的项目目录中。

干杯！

- michael_vons

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robertklep · Accepted Answer

似乎dist文件夹仍然来自内存

很可能是因为您正在使用webpack-dev-server（这就是它的功能）。

如果您想要捆绑的资产实际上被写入磁盘，请运行 webpack 命令。