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里踩过的坑实在太多了，因此便对本身现阶段所了解的用法做一个总结，后续学习再逐渐完善上去。

1、配置文件

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

  1 var webpack = require('webpack');
  2 var path = require('path');
  3 
  4 // _dirname 为当前模块文件所在目录的绝对路径
  5 // path.resolve 至关于 _dirname + build 进行地址拼接
  6 var buildPath = path.resolve(__dirname,"build");
  7 var nodemodulesPath = path.resolve(__dirname,'node_modules');
  8 
  9 var autoprefixer = require('autoprefixer');
 10 var px2rem = require('postcss-pxtorem');
 11 var px2remOpts = {
 12     rootValue: 100,
 13     propWhiteList: [],
 14 };
 15 
 16 var HtmlWebpackPlugin = require('html-webpack-plugin');
 17 
 18 var config = {
 19 
 20     //入口文件配置
 21     entry:｛
 22         // 入口文件路径
 23         index:path.resolve(__dirname,'src/main.js'),
 24 
 25         // 为了优化，切割代码，提取第三方库
 26         vendor: [
 27           'react',
 28           'react-dom',
 29           'react-router'
 30         ]
 31         
 32     ｝,
 33 
 34     resolve:{
 35         // extentions: 配置文件的扩展名，当在import文件时，不用在须要添加扩展名
 36         // 默认的扩展名为[“”, “.webpack.js”, “.web.js”, “.js”]
 37         // 空字符串在此是为了resolve一些在import文件时不带文件扩展名的表达式
 38         extentions:["","jsx","json","js","web.js"],
 39 
 40         // 路径别名, 懒癌福音
 41         alias:{
 42           app:path.resolve(__dirname,'src/js'),
 43           // 之前你可能这样引用 import { Nav } from '../../components'
 44           // 如今你能够这样引用 import { Nav } from 'app/components'
 45 
 46           style:path.resolve(__dirname,'src/styles')
 47           // 之前你可能这样引用 @import "../../../styles/mixins.scss"
 48           // 如今你能够这样引用 @import "style/mixins.scss"
 49         }          
 50     },
 51 
 52     //文件导出的配置
 53     output:{
 54         path:buildPath,               // 输出路径
 55         filename:"app.js"             // 输出文件名 
 56     },
 57 
 58     // 生成source-map , 便于开发者debug 
 59     devtool: 'eval-source-map',
 60 
 61     module: {
 62         //loaders加载器
 63         loaders: [
 64             // babel ES6解析
 65             {
 66                 test: /\.(js|jsx)$/,                 // 用正则来验证所要测试的文件后缀名
 67                 include: [path.resolve(__dirname, "src/app")],  // 所要处理文件的路径
 68                 exclude: [nodemodulesPath],             // 排除不处理的目录
 69                 // 加载器的名字，不一样加载器之间用！链接，？为使用该加载器后附带的功能 , 加载器的执行为从后往前执行
 70                 loader: 'babel' 
 71             },
 72                                      
 73             // image解析
 74             {
 75                 test:/\.(png|jpg)$/,
 76                 loader:'url-loader?limit=50000'
 77             },
 78             // CSS文件解析
 79             {
 80                 test:   /\.css$/,
 81                 loader: "style-loader!css-loader!postcss-loader"
 82             }
 83 
 84         ]
 85     },
 86 
 87     // postcss平台
 88     // 此处配置了免前缀功能和px转换为rem功能
 89     postcss: [ autoprefixer({ browsers: ['last 2 versions'] }),px2rem(px2remOpts) ],
 90 
 91     plugins: [
 92 
 93         //   优化使用模块
 94         new webpack.optimize.OccurrenceOrderPlugin(), 
 95         // webapck 会给编译好的代码片断一个id用来区分
 96         // 而这个插件会让webpack在id分配上优化并保持一致性。
 97         // 具体是的优化是：webpack就可以比对id的使用频率和分布来得出最短的id分配给使用频率高的模块
 98 
 99 
100         //   压缩代码
101         new webpack.optimize.UglifyJsPlugin({
102               compressor: {
103                 warnings: false
104               }
105         }), 
106 
107 
108         //  去除debug提示信息
109         // 不少库的内部，有process.NODE_ENV的判断语句，
110         // 改成production。最直观的就是没有全部的debug相关的东西，体积会减小不少
111         new webpack.DefinePlugin({
112               'process.env': {
113                 'NODE_ENV': JSON.stringify('production')
114               }
115         })
116 
117 
118         // 'vendor' 就是把依赖库(好比react react-router, redux)所有打包到 vendor.js中
119         // 'vendor.js' 就是把本身写的相关js打包到bundle.js中
120         // 通常依赖库放到前面，因此vendor放第一个
121         new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js' ),
122 
123 
124         new HtmlWebpackPlugin({
125               template:'src/index.html',
126               // html模板的路径
127               
128               title: '产品模式',
129               // html模版的标题
130               
131               filename:'index.html',
132               // 文件名以及文件将要存放的位置
133 
134               favicon:'./src/favicon.ico',
135               // favicon路径
136               
137               inject:'body',
138               // js插入的位置，true/'head'  false/'body'
139 
140               chunks: ['vendor', 'index' ],
141               // 指定引入的chunk，根据entry的key配置，不配置就会引入全部页面的资源
142 
143               hash:true,
144               // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新
145               // 在项目后续过程当中，常常须要作些改动更新什么的，一但有改动，客户端页面就会自动更新！
146 
147               minify:{
148               // 压缩HTML文件
149                 removeComments:true,
150                 // 移除HTML中的注释
151 
152                 collapseWhitespace:true
153                 // 删除空白符与换行符
154               }
155         })
156     ]
157 }
158 
159 module.exports = config;

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

2、启动运行

　　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