webpack用法总结

　　原先已经翻译过一篇关于webpack的文章了，那是刚开始学习webpack时参考阮一峰的教程，顺便就把它的英文文章给翻译了过来。Webpack是一个强大的模块化打包和构建工具，不仅能对JS进行打包，而且还能通过加载器对CSS 、image 、font 进行打包，引用时直接当作模块来引用，最后统一打包成一个bundle.js文件来输出；同时Webpack还支持插件功能，其各种插件大大丰富了webpack的功能，如最常见的html-webpack-plugin插件，能由写好的模版在编译后直接生成所需要的html页面，方便维护、扩展和部署上线。此外，Webpack还能对css进行预处理, 如使用postcss－loader中的autoprefixer 、pxtorem等功能实现CSS免前缀 ，px自动转换为rem；使用less-loader 、scss-loader直接引用less、scss文件；使用css-loader中的css modules实现CSS样式的局部与全局编写，并用hash值来进行样式命名，让你在编写代码时再也不用为命名而发愁了。。。总之，Webpack给人以无所不能的感觉，但是上手麻烦，配置项看起来让新手一脸懵逼，远不如gulp小而灵巧，应该也算是它的一个弊端吧！

　　因在Webpack里踩过的坑实在太多了，所以便对自己现阶段所了解的用法作一个总结，后续学习再逐渐完善上去。

一、配置文件

　　配置文件中主要分为入口文件处理、输出处理、加载器、插件、webpack开发服务器这几个部分，因webpack开发服务器这部分内容较多，放到后面详细介绍。

var webpack = require('webpack');
var path = require('path');

// _dirname 为当前模块文件所在目录的绝对路径
// path.resolve 相当于 _dirname + build 进行地址拼接
var buildPath = path.resolve(__dirname,"build");
var nodemodulesPath = path.resolve(__dirname,'node_modules');

var autoprefixer = require('autoprefixer');
var px2rem = require('postcss-pxtorem');
var px2remOpts = {
    rootValue: 100,
    propWhiteList: [],
};

var HtmlWebpackPlugin = require('html-webpack-plugin');

var config = {

    //入口文件配置
    entry:｛
        // 入口文件路径
        index:path.resolve(__dirname,'src/main.js'),

        // 为了优化，切割代码，提取第三方库
        vendor: [
          'react',
          'react-dom',
          'react-router'
        ]
        
    ｝,

    resolve:{
        // extentions: 配置文件的扩展名，当在import文件时，不用在需要添加扩展名
        // 默认的扩展名为[“”, “.webpack.js”, “.web.js”, “.js”]
        // 空字符串在此是为了resolve一些在import文件时不带文件扩展名的表达式
        extentions:["","jsx","json","js","web.js"],

        // 路径别名, 懒癌福音
        alias:{
          app:path.resolve(__dirname,'src/js'),
          // 以前你可能这样引用 import { Nav } from '../../components'
          // 现在你可以这样引用 import { Nav } from 'app/components'

          style:path.resolve(__dirname,'src/styles')
          // 以前你可能这样引用 @import "../../../styles/mixins.scss"
          // 现在你可以这样引用 @import "style/mixins.scss"
        }          
    },

    //文件导出的配置
    output:{
        path:buildPath,               // 输出路径
        filename:"app.js"             // 输出文件名 
    },

    // 生成source-map , 便于开发者debug 
    devtool: 'eval-source-map',

    module: {
        //loaders加载器
        loaders: [
            // babel ES6解析
            {
                test: /.(js|jsx)$/,                 // 用正则来验证所要测试的文件后缀名
                include: [path.resolve(__dirname, "src/app")],  // 所要处理文件的路径
                exclude: [nodemodulesPath],             // 排除不处理的目录
                // 加载器的名字，不同加载器之间用！连接，？为使用该加载器后附带的功能 , 加载器的执行为从后往前执行
                loader: 'babel' 
            },
                                     
            // image解析
            {
                test:/.(png|jpg)$/,
                loader:'url-loader?limit=50000'
            },
            // CSS文件解析
            {
                test:   /.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }

        ]
    },

    // postcss平台
    // 此处配置了免前缀功能和px转换为rem功能
    postcss: [ autoprefixer({ browsers: ['last 2 versions'] }),px2rem(px2remOpts) ],

    plugins: [

        //   优化使用模块
        new webpack.optimize.OccurrenceOrderPlugin(), 
        // webapck 会给编译好的代码片段一个id用来区分
        // 而这个插件会让webpack在id分配上优化并保持一致性。
        // 具体是的优化是：webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块


        //   压缩代码
        new webpack.optimize.UglifyJsPlugin({
              compressor: {
                warnings: false
              }
        }), 


        //  去除debug提示信息
        // 很多库的内部，有process.NODE_ENV的判断语句，
        // 改为production。最直观的就是没有所有的debug相关的东西，体积会减少很多
        new webpack.DefinePlugin({
              'process.env': {
                'NODE_ENV': JSON.stringify('production')
              }
        })


        // 'vendor' 就是把依赖库(比如react react-router, redux)全部打包到 vendor.js中
        // 'vendor.js' 就是把自己写的相关js打包到bundle.js中
        // 一般依赖库放到前面，所以vendor放第一个
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js' ),


        new HtmlWebpackPlugin({
              template:'src/index.html',
              // html模板的路径
              
              title: '产品模式',
              // html模版的标题
              
              filename:'index.html',
              // 文件名以及文件将要存放的位置

              favicon:'./src/favicon.ico',
              // favicon路径
              
              inject:'body',
              // js插入的位置，true/'head'  false/'body'

              chunks: ['vendor', 'index' ],
              // 指定引入的chunk，根据entry的key配置，不配置就会引入所有页面的资源

              hash:true,
              // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新
              // 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！

              minify:{
              // 压缩HTML文件
                removeComments:true,
                // 移除HTML中的注释

                collapseWhitespace:true
                // 删除空白符与换行符
              }
        })
    ]
}

module.exports = config;

　　上面代码中详细介绍了Webpack的用法和在实际项目开发过程中的常用的加载器和插件

二、启动运行

　　Webpack该如何启动运行编译了，主要有以下几种方法：

　　1. 启动编译　

webpack    //  默认执行 webpack.config.js文件
webpack --config webpack-pro-config.js       //执行另一份配置文件 
webpack --display-error-details              //显示异常信息 
webpack --watch                             //监听变动并自动打包 
webpack -p                                  //压缩混淆脚本，这个非常非常重要！ 
webpack -d                                  //生成map映射文件，告知哪些模块被最终打包到哪里了

　　2.快捷执行

　　当我们想执行webpack的执行命令时，我们就得在命令行中输入很长一遛的命令，自己操作起来很不方便，同时也不便于后续人员的维护, 我们可以把执行命令写在package.json文件中的scripts键中，这样我们每次执行时只需敲自定义的命令即可

"scripts": {
    "start": "webpack --watch",      // npm start  
    "dev": "webpack-dev-server --host 0.0.0.0",    // npm run dev
    "pro": "webpack --config webpack-pro-config.js --progress --colors"   // npm run pro
  }

  

webpack各加载器和插件用法详细介绍：

1.  上次我翻译的webpack-demo