一、代码压缩
A. 压缩HTML
<pre>//根据模板插入css/js等生成最终HTML
new HtmlWebpackPlugin({
favicon:'./src/img/favicon.ico', //favicon路径
filename:'/view/index.html', //生成的html存放路径，相对于 path
template:'./src/view/index.html', //html模板路径
inject:true, //允许插件修改哪些内容，包括head与body
hash:true, //为静态资源生成hash值
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
})</pre>
HtmlWebpackPlugin插件在生成HTML调用了 html-minifier 插件来完成对HTML的压缩，这里我们使用两个配置完成来移除HTML中的注释以及空白符达到压缩的效果，其他的具体的配置参数大家请参考 html-minifier API
B. 压缩JS与CSS
<pre>new webpack.optimize.UglifyJsPlugin({ //压缩代码
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //排除关键字
})</pre>
webpack已经内嵌了uglifyJS来完成对JS与CSS的压缩混淆，无需引用额外的插件。
这里需要注意的是压缩的时候需要排除一些关键字，不能混淆，比如$或者require，如果混淆的话就会影响到代码的正常运行。
修改完 webpack配置后，我们就可以运行webpack命令来重新打包了。
这次可以看到dist下输出的Js/css/html都是压缩过的。
二、webpack-dev-server
webpack开发服务器，是webpack官方提供的一个辅助开发工具，它可以自动监控项目下的文件，一旦有修改保存操作，开发服务器就会自动运行webpack 打包命令，帮我们自动将开发的代码重新打包。而且，如果需要的话，还能自动刷新浏览器，重新加载资源。
Cool！一般前端开发人员都会有两台显示器，一台用于编辑代码，一台用于打开浏览器查看效果。如果配置上webpack-dev-server的话，我们只需要在保存修改后的代码，什么也不用做，webpack就能自动帮我们打包代码，同时自动刷新浏览器，让我们立马看到修改后的效果。
最后，webpack常用的基本配置
<pre>var path=require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:{
index:"./src/js/page/index.js",
},
output:{
path: path.join(__dirname,'dist'),
publicPath: "/webpack/dist/",
filename: "js/[name].js",
chunkFilename: "js/[id].chunk.js"
},
module: {
loaders: [ //加载器
{test: /.css$/, loader:ExtractTextPlugin.extract("style", "css") },
{test: /.html$/, loader: "html" },
{test: /.(png|jpg)$/, loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'}
]
},
plugins:[
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),
new ExtractTextPlugin("css/[name].css"), //单独使用style标签加载css并设置其路径
new webpack.optimize.UglifyJsPlugin({ //压缩代码
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require'] //排除关键字
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon:'./src/img/favicon.ico', //favicon路径
filename:'/view/index.html', //生成的html存放路径，相对于 path
template:'./src/view/index.html', //html模板路径
inject:true, //允许插件修改哪些内容，包括head与body
hash:true, //为静态资源生成hash值
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
})
],
devServer:{
contentBase:'./dist/view'
}
};</pre>
网友评论