CODEWITHSUNDEEP
angularjscachingwebpackproduction
Dpk_Gopi
Dpk_Gopi

Reputation: 267

webpack angular project in production

Im an using webpack angular project and have successfully able to generate the bundle and inject it into the index.html file.

But in browser i can see the addition Webpack FOLDER in the source tab that has old code unless i clear the browser cache i cannot find the latest code. However there are generated bundles and styles but my pages dont take these files, they are taking code from the webpack folder.

Im attaching the folder structure that i see in the browser, U can see the build folder from where the code is rendered and also the webpack folder where the latest code is not updating , any help appreciated, Thanks enter image description here

==================================================== Webpack.development.config.js 

const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
HtmlWebpackPlugin = require('html-webpack-plugin');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const buildPath = path.resolve(__dirname,'app/build');
const mainPath = path.resolve(__dirname, 'app', 'index.js');
const config = {
    context:__dirname, 
    entry:  {
     app:[
        mainPath
      ],
    vendors: ['jquery','angular']
    },
    output:{
        path:buildPath,
        filename:"bundle.min.js",
        publicPath: "http://website.oo.com/build/" // development
    },
    devtool: 'source-map',
    resolve:{
        alias:{     
            jquery: "jquery/src/jquery"
        },
        extensions:['','.js','.css','.less','.html']
    },
    module:{
        loaders:[
            {test: /\.js$/,loader: 'babel-loader',query:{presets: ["es2015"],compact: false},exclude: '/node_modules/'},  
            {test: /\.less$/,loader:ExtractTextPlugin.extract(['css','less']) },   
            {test: /\.css$/,loader:ExtractTextPlugin.extract(['css'])},  
            {test: /\.html$/,loader: "html?config=otherHtmlLoaderConfig"},
            {test: /bootstrap\/js\//, loader:'imports?jQuery=jquery'}, 
            {test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader:'url-loader',query:{limit:100000}},
            {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff"},
            {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
            {test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,loader: "imports?this=>window"}   
        ]
  }, 
  plugins: [
    new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"}),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin({minSizeReduce:1,moveToParents: true}),
    new webpack.optimize.UglifyJsPlugin({compress: { warnings: false },comments:false,sourceMap:true,minimize: true}),
    new ExtractTextPlugin('style.min.css', { allChunks: true }),  
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendor.min.js'),
    new CleanWebpackPlugin(['app/build'],{verbose: true,dry: false,exclude: ['vendor.min.js'],watch:false}),
    new HtmlWebpackPlugin({
      title: 'Onepoint Global Account',
      template:path.join(__dirname,'app','index.html'),
      inject: 'body'}),
  ]
};
module.exports = config;

======================================================== Package.json 

"scripts": {
    "local": "webpack-dev-server --content-base app",
    "server": "node server",
    "build": "set NODE_ENV=production && webpack -d --watch -p --config  webpack.development.config.js"
  }

I use the command "npm run build" to start the project.

Upvotes: 0

Views: 1037

Answers (1)

olore
olore

Reputation: 4857

To address your two points:

  1. /build is in the URL because of this line:

    publicPath: "http://website.oo.com/build/" // development

    Your buildPath is the directory you can host your site from.

  2. Do you have a webpack.prod.config.js? It's OK to only have one webpack config file, but please be aware that you are running production (set NODE_ENV=production, and -p) with your development config. If you want to defeat the browser caching, you can specify a hash in your output file:

    output: {
  ...
  filename:"bundle.[hash].min.js",
},

Upvotes: 1

Related Questions