webpack配置

基于react的webpack配置，总结于个人的实际项目开发（webpack官方说明文档）

        要在项目中使用webpack作为打包工具，

        step-1   全局安装webpack及相关组件  

                   npm install webpack -g
                   npm install webpack-dev-server -g     //开发服务器

       step-2  在项目目录安装webpack及相关组件，并写入package.json的依赖配置文件(如项目存储在myapp文件夹)

                   myapp>npm install webpack --save

                   myapp>npm install webpack-dev-server  --save

       step-3  创建webpack的配置文件webpack.config.js，大致内容如下：

      

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');         //引用相关的webpack包
var path = require('path');

module.exports = {
  context: path.join(__dirname),      //定义入口文件，_dirname为全局变量
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/js/root.js",     //js入口文件
  module: {
    loaders: [
      {
        test: /.js?$/,         //正则表达式，解析所有js文件
        exclude: /(node_modules)/,    //跳过所有node_modules文件夹
        loader: 'babel-loader',       //用babel-loader解析
        query: {
          presets: ['react', 'es2015'],   //加载依赖包
          plugins: ['react-html-attrs'], //添加组件的插件配置
        }
      },
      //下面是使用 ant-design 的配置文件
      { test: /.css$/, loader: 'style-loader!css-loader' }
    ]
  },
  output: { //webpack打包后输出配置↓
    path: __dirname,
    filename: "./src/bundle.js"     //输出的文件路径及名称
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

• path: 打包文件存放的绝对路径
• publicPath: 网站运行时的访问路径
• filename: 打包后的文件名

  PS：使用webpack打包项目文件，常用命令如下：

         1.打包文件    myapp>webpack

         2.自动打包    myapp>webpack --watch    //需手动刷新，才能看到打包后效果

         3.自动打包    myapp>webpack-dev-server   //启用web服务器部署，实时刷新，注：webpack2.5.1不可实时刷新

         4.自动打包    myapp>webpack-dev-server  --content-base  --inline  --hot    //部署路径只保留根路径(--content-base),http://localhost:8080/ ，且实时刷新页面