Webpack Config Examples

webpack.dev.config.js

module.exports = {
  entry: [ // 進入點
    'babel-polyfill',
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://127.0.0.1:8000',
    'webpack/hot/only-dev-server',
    './index'
  ],
  output: { // 輸出設定
    path: path.join(__dirname, '/../dist/assets'),
    filename: 'app.js',
    publicPath: '/assets/'
  },
  module: // 各種 loader 設定
  {
    rules:
      [{
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '/../src')
      },
      {
        test: /\.(css|scss)$/,
        exclude: /node_modules/,
        loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        include: path.join(__dirname, '/../src/containers')
      }]
  },
  plugins: [ // 各種 plugin 設定
    new StyleLintPlugin({syntax: 'scss'}),
    new CopyWebpackPlugin([
      {
        from: 'assets/lib',
        to: 'lib'
      },
      {
        from: 'assets/images',
        to: 'images'
      },
      {
        from: 'locales/**/*.json',
        to: '..'
      },
      {
        from: 'favicon.ico',
        to: '..'
      },
      {
        from: 'preview.html',
        to: '..'
      }
    ]),
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      filename: '../index.html',
    }),
    new CaseSensitivePathsPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      'VERSION': JSON.stringify(VERSION || COMMIT_HASH),
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev')
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devtool: 'cheap-module-source-map', // sourcemap 設定
  devServer: // webpack dev server 設定
  {
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
    port: 8000,
    publicPath: '/assets/',
    noInfo: false
  },
  mode: 'development'
}

webpack.stage.config.js

module.exports = {
  entry: ['babel-polyfill', './index'],
  output: {
    path: path.join(__dirname, '/../dist/assets'),
    filename: 'app.js',
    publicPath: '/assets/'
  },
  module:
  {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
      },
      {
        test: /\.(css|scss)$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
            'sass-loader',
            'postcss-loader'
          ]
        })
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]
  },
  plugins: [
    new StyleLintPlugin({syntax: 'scss'}),
    new CopyWebpackPlugin([
      {
        from: 'assets/lib',
        to: 'lib'
      }
    ]),
    new CaseSensitivePathsPlugin(),
    new webpack.DefinePlugin({
      'VERSION': JSON.stringify(VERSION || COMMIT_HASH),
      'process.env.NODE_ENV': 'stage'
    }),
    new ExtractTextPlugin('app.css', {
      allChunks: true
    })
  ],
  devtool: 'sourcemap'
}