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

"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
  }