webpack学习笔记(2)_H5之家 - 中国HTML5教程资源分享第一站

使用DefinePlugin设置环境变量, 根据设置的环境变量决定是否打包压缩及启动dev server或prod server

plugins: [ new webpack.DefinePlugin({ 'process.evn.NODE_ENV': JSON.stringify('production') }); ]

判断当前是否是生产环境

var isProduction = function() { return process.env.NODE_ENV === 'production'; } output: { path: path.resolve(isProduction ? '__build' : './assets/'), filename: isProduction ? '[name].js' : './assets/js/[chunkhash:8].[name].min.js', chunkFilename: isProduction ? '[chunkhash:8].chunk.js' : './assets/js/[chunkhash:8].chunk.min.js', publicPath: isProduction ? '/__build/' : 'http://cdn.site.com/' } 代码压缩 new webpack.optimizeUglifyJsPlugin({ compress: { warnings: false } }); 添加Hash缓存

对于没有修改的文件, 从缓存中获取文件, 对于已经修改的文件, 不要从缓存中获取

output: { //chunkhash 默认16位, 可自定义配置 filename: '[chunkhash:8].bundle.js' } 自动生成页面

文件名带上hash值后, 这个值在每次编译的时候都会发生变化,都需要在 html 文件里手动修改引用的文件名,这种重复工作很琐碎且容易出错, 这里我们可以使用 html-webpack-plugin 来帮我们自动处理这件事情, 用来简化创建服务于webpackbundle的HTML文件

解决方案: 在项目目录下建一个index.tpl.html作为钩子

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My APP</title> </head> <body> <div></div> </body> </html>

在webpack.config.dev.js和webpack.config.prod.js添加配置代码, 即可生成相应的index.html

plugins: [ new HtmlWebpackPlugin({ template: 'app/index.tpl.html', inject: 'body', filename: index.html }) ] 加载器 js处理 babel-loader: 转换JSX babel-core: babel核心包 babel-preset-react babel-preset-es2015   loaders：[ { loaders: 'xxx-loader', query: { resets:['react', 'es2015'] } } ] css处理 style-loader css-loader less-loader img处理 url-loader 可以根据自定义文件大小或者转化为 base64 格式的 dataUrl, 或者单独作为文件, 也可以自定义对应的hash 文件名 file-loader 默认情况下会根据图片生成对应的 MD5hash 的文件格式 image-webpack-loader 提供压缩图片的功能

加载babel-loader需要配置query参数

loaders：[ { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ // 当内容size小于8KB时, 会自动转成base64的方式内嵌进去, 这样可以减少一个HTTP的请求 // 当图片大于8KB时, 则会在img/下生成压缩后的图片, 命名是[hash:8].[name].[ext]的形式 // hash:8的意思是取图片内容hashsum值的前8位, // 这样做能够保证引用的是图片资源的最新修改版本, 保证浏览器端能够即时更新 'url?limit=8192&name=img/[hash:8].[name].[ext]', // 图片压缩 'image-webpack' ] } ]   loaders：[ { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ // 生成md5 hash格式的文件名 'file?hash=sha512&digest=hex&name=[hash].[ext]', // 图片压缩 'image-webpack' ] } ] 插件  plugins: [definPlugin, bannerPlugin, uglifyJsPlugin...] 设置环境变量 var definPlugin = new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }); 给输出的文件头部添加注释信息 varbannerPlugin =newwebpack.BannerPlugin('This is test!'); JS混淆 var uglifyJsPlugin = new webpack.optimize.UglifyJsPlugin({ mangle: { // 配置以下列表, 在混淆代码时, 以下配置的变量, 不会被混淆 except: ['$super', '$', 'exports', 'require'] } }); 压缩JS var minChunkSizePlugin = new webpack.optimize.MinChunkSizePlugin({ compress: { warnings: false } }); 压缩React var definPlugin = new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }); 加载jQuery new webpack.ProvidePlugin({ $: 'jquery' }); 公共模块提取 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', // 将公共模块提取, 生成名为`vendors`的chunk chunks: ['index','list','about'], //提取哪些模块共有的部分 minChunks: 3 // 提取至少3个模块共有的部分 }); 单独使用link标签加载css并设置路径 newExtractTextPlugin('css/[name].css'),// 相对于output配置中的publickPath 自动生成html文件, 模板生成的相关配置, 每个对于一个页面的配置, 有几个写几个 new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/img/favicon.ico', //favicon路径, 通过webpack引入同时可以生成hash值 filename: './view/index.html', //生成的html存放路径, 相对于path template: './src/view/index.html', //html模板路径 inject: 'body', //js插入的位置, true/'head'http://www.web520.cn/'body'/false hash: true, //为静态资源生成hash值 chunks: ['vendors', 'index'], //需要引入的chunk, 不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }); new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/img/favicon.ico', //favicon路径, 通过webpack引入同时可以生成hash值 filename: './view/list.html', //生成的html存放路径, 相对于path template: './src/view/list.html', //html模板路径 inject: true, //js插入的位置, true/'head'http://www.web520.cn/'body'/false hash: true, //为静态资源生成hash值 chunks: ['vendors', 'list'], //需要引入的chunk, 不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }); 其它插件 new webpack.HotModuleReplacementPlugin() // 热加载 HotModuleReplacementPlugin() // 代码热替换 NoErrorsPlugin() // 报错但不退出webpack进程 OpenBrowserPlugin() // 自动打开浏览器 webpack使用分析多个模块的公用代码提取并单独打包 var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { entry: { page1: './main1.js', page2: './main2.js' }, output: { path: 'build', filename: '[name].js' }, plugins: [ commonsPlugin ] } 文件引用忽略扩展名配置