【问题标题】:Webpack dist folder not getting created in project folder?Webpack dist 文件夹未在项目文件夹中创建?
【发布时间】:2017-01-09 16:49:00
【问题描述】:

一切运行良好,但无法找到我的 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"
  }
}

【问题讨论】:

  • “publicPath”被几个 Webpack 的插件用来更新 CSS 中的 URL,生成生产构建时的 HTML 文件。因此它不会对您的开发环境产生任何影响medium.com/@rajaraodv/…
  • 我可以通过 webpack -p 在本地创建 dist 文件夹。但这在本地不起作用,因为它只创建分发代码不会发生在服务器启动和指向 dist 文件夹的指针。这可以在本地机器上实现吗?

标签: reactjs npm webpack


【解决方案1】:

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

很可能是因为您使用的是webpack-dev-server(它就是这样做的)。

如果您希望将捆绑的资产实际写入磁盘,请运行 webpack

【讨论】:

  • grt 这个作品!!解决了我的困惑。在 localhost:port-number 上的磁盘上创建 dist 文件夹后,CLI 退出。有关如何从 dist 文件夹(如本地 prod)运行应用程序的任何参考
  • @PradeepJaiswar 这取决于您的应用,它可能适用于像http-server 这样简单的东西。
猜你喜欢
  • 2019-02-20
  • 2019-02-28
  • 2019-09-08
  • 1970-01-01
  • 2018-07-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多