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;