Webpack配置开发环境和生产环境

关于webpack配置开发环境和生产环境，官网有详细教程，不再赘述。

官方文档地址：https://doc.webpack-china.org/guides/production/。

下面这两篇博文也写得很好：

webpack的使用以及脱坑集合：http://blog.csdn.net/itKingOne/article/details/70331106

webpack开发和生产两个环境的配置详解：http://blog.csdn.net/itKingOne/article/details/70331783

这里直接贴出项目上使用的配置：

1，package.json

{
  "name": "www",
  "version": "1.0.0",
  "scripts": {
    "clean": "rm -fr ./output_www",
    "development": "webpack",
    "production": "webpack --config webpack.production.js --progress"
  },
  "devDependencies": {
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.0",
    "html-webpack-plugin": "^2.7.1",
    "copy-webpack-plugin": "^1.1.1",
    "less": "^2.5.3",
    "less-loader": "^2.2.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.11"
  }
}

2，web pack.config.js

module.exports = {
  // entry file
  entry: './js/main.js', //入口文件
  output: {
    path: __dirname, //编译后文件的存放路径
    filename: 'bundle.js'
  },
  plugins: [],
  devtool:'source-map',
  module: {
    loaders: [ 
      { test: /\.css$/, loader: 'style-loader!css-loader' },  //加载loader 处理js文件中的 import css 文件
      { test: /.*\.(gif|png|jpe?g|svg)$/i, loader: 'url-loader' } //加载loader ，处理import 的css文件中的 图片文件
    ]
  }
}

3，webpack.production.js

var path = require("path");
var webpack = require('webpack');
var webpackConfig = require('./webpack.config.js');
var CopyWebpackPlugin = require('copy-webpack-plugin');

webpackConfig.devtool = false; //生产环境不需要源码的映射

webpackConfig.plugins.push(
  new CopyWebpackPlugin([ //拷贝各个文件夹 到 out_www的目录下 
    { from: './css', to: 'css' },
    { from: './images', to: 'images' },
    { from: './js', to: 'js' },
    { from: './lib', to: 'lib' },
    { from: './component/colorpicker-master', to: 'component/colorpicker-master' },
    { from: './index.html', to: 'index.html' }
  ]),
  new CopyWebpackPlugin([
    { from: './pages', to: 'pages' }
  ],{ignore: ['*.js']}),  //拷贝pages文件夹到out_www文件夹下 ， js文件不拷贝

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }), 
  new webpack.DefinePlugin({  // 定义环境为生产环境
    'process.env': {
      NODE_ENV: 'production'
    }
  })
);

webpackConfig.output.path = path.resolve(__dirname, 'output_www'); // 输出文件夹在当前文件夹下创建 out_www 文件夹

module.exports = webpackConfig;