CODEWITHSUNDEEP
reactjsnpmwebpack
Pradeep Jaiswar
Pradeep Jaiswar

Reputation: 1805

Webpack dist folder not getting created in project folder?

Everything running fine, but could not able to find where is my dist folder.I am using publicPath as per documentation, still dist folder seems to coming from memory.

This might be small issue, i am new to webpack. Any help would work

Below is my webpack.config.js file

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'
    }
};

My package.json file is 

{
  "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"
  }
}

Upvotes: 22

Views: 29411

Answers (2)

michael_vons
michael_vons

Reputation: 1060

Setting devServer:{ writeToDisk: true } is no longer supported

The recent solution is to add "build": "webpack --config webpack.dev.config.js" to your package.json. Ensure your webpack config output params are set as

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

Now go to your terminal and run npm run build. Voila!. Your dist folder should appear in your project directory.

Cheers!

Upvotes: 1

robertklep
robertklep

Reputation: 203304

still dist folder seems to coming from memory

Most likely because you're using webpack-dev-server (that's what it does).

If you want your bundled assets to be actually written to disk, run webpack.

Upvotes: 44

Related Questions