详细的webpack介绍什么的，在这里就不说了，直接写它能做什么以及如何去做！
常用的功能有：
代码压缩：
- html压缩 （使用HtmlWebpackPlugin插件）
HtmlWebpackPlugin插件在生成HTML调用了 html-minifier 插件来完成对HTML的压缩，这里我们使用两个配置完成来移除HTML中的注释以及空白符达到压缩的效果，其他的具体的配置参数大家请参考 html-minifier API
//根据模板插入css/js等生成最终HTML
new HtmlWebpackPlugin({
favicon:'./src/img/favicon.ico', //favicon路径
template:'./src/view/index.html', //html模板路径
filename:'/view/index.html', //生成的html存放路径和名称
inject:true, //允许插件修改哪些内容，包括head与body
hash:true, //为静态资源生成hash值（处理缓存问题）
minify:{ //压缩HTML文件
removeComments:true, //移除HTML中的注释
collapseWhitespace:true //删除空白符与换行符
}
})
- js、css 压缩（内置插件）
webpack 已经已经内嵌了uglifyJS来完成对JS与CSS的压缩混淆，无需引用额外的插件。但是需要排除一下可能的关键字，比如说$什么的。
new webpack.optimize.UglifyJsPlugin({ //压缩代码
compress: {
warnings: false
},
except: ['super', '', 'exports', 'require'] //排除关键字
})
web服务器
安装包 webpack-dev-server
功能：建立web服务器、修改自动刷新
注意webpack-dev-server是把所有资源存储在内存的，所以你会发现在本地没有生成对应的chunk访问却正常。
devServer:{
contentBase:'./build',//启动服务的根目录
port:8090, //启动服务的端口号，不写默认8080
inline:true,//启动热更新（文件有编辑保存操作时自动编译刷新）
//hot:true //模块热更新，异步刷新，不会全部刷新页面
},
解析和加载less、scss、ejs、jsx、css、js、image等
Webpack将所有静态资源都认为是模块，比如JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等等，从而可以对其进行统一管理，Webpack的加载器之间可以进行串联，一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理，从而运行时可以通过style标签将其应用到最终的浏览器环境。
// webpack loaders的配置示例
loaders: [
//test项表示匹配的资源类型
//loader或loaders项表示用来加载这种类型的资源的loader
{
test: /\.(jpe?g|png|gif|svg)/i,
loaders: [
'image?{bypassOnDebug: true, progressive:true, optimizationLevel: 3, pngquant:{quality: "65-80"}}',
'url?limit=10000&name=img/[hash:8].[name].[ext]',
]
},
{
test: /\.(woff|eot|ttf)/i,
loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'
},
//{test: /\.(tpl|ejs)/, loader: 'ejs'},
{test: /\.js/, loader: 'jsx'},
{test: /\.css/, loader: 'style!css'},
{test: /\.scss/, loader: 'style!css!scss'},
]
图片资源的loader配置：图片资源在加载时先压缩，然后当内容size小于~10KB时，会自动转成base64的方式内嵌进去，这样可以减少一个HTTP的请求。当图片大于10KB时，则会在img/下生成压缩后的图片，命名是[hash:8].[name].[ext]的形式。hash:8的意思是取图片内容hashsum值的前8位，这样做能够保证引用的是图片资源的最新修改版本，保证浏览器端能够即时更新。
对于css文件，默认情况下webpack会把css content内嵌到js里边，运行时会使用style标签内联。如果希望将css使用link标签引入，可以使用ExtractTextPlugin插件进行提取。
使用ExtractTextPlugin插件可以将特定的文本提取到一个文件中。比如说将css不以内联的方式写入页面，而是独立成一个文件。
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
]
},
plugins: [
new ExtractTextPlugin("css/[name].css")
]
}
按需加载
使用require.ensure()作为代码分割的标识。
资源路径切换（部署开发环境和生产环境）
因为入口文件是手动使用script引入的，在webpack编译之后入口文件的名称和路径一般会改变，即开发环境和生产环境引用的路径不同：
//开发环境引入js <script src="/build/vendors.js"></script> //生产环境引入js <script src="http://manster.me/vendors.js"></script>
webpack提供了HtmlWebpackPlugin插件来解决这个问题，HtmlWebpackPlugin支持从模板生成html文件，生成的html里边可以正确解决js打包之后的路径、文件名问题，配置示例：
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: './src/a.html',
filename: 'a',
inject: 'body',
chunks: ['vendors', 'a']
})
]
这里资源根路径的配置在output项：
// webpack.config.js
output: {
publicPath: debug ? '/build/' : 'http://www.manster.me/'
}
以下是一个相对全面的配置，因项目需求不同可以在此基础上增删
var path=require('path');
var webpack = require('webpack');
//区分开发环境还是生产环境
var definePlugin = new webpack.DefinePlugin({
__DEV__: (process.env.BUILD_DEV||'dev').trim() == 'dev'
});
//独立打包文件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//自动生成html
var HtmlWebpackPlugin = require('html-webpack-plugin');
//自动打开浏览器
var openBrowserWebpackPlugin = require('open-browser-webpack-plugin');
module.exports={
//打包的入口文件 String|Object
entry: path.resolve(__dirname, 'src/js/index.js'),
output: { //配置打包结果 Object
//定义输出文件路径
path: path.resolve(__dirname, 'build'),
//指定打包文件名称
filename: 'bundle.js'
},
//自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头
resolve:{
extensions:['','.js','.css','.json'],
},
//定义了对模块的处理逻辑 Object
module: {
//定义了一系列的加载器 Array
loaders: [
{
test: /\.(js|jsx)/, //正则，匹配到的文件后缀名
// loader/loaders：string|array，处理匹配到的文件
loader: 'babel-loader',
query: { presets: ["es2015","react"] },
// include：String|Array 包含的文件夹
// exclude：String|Array 排除的文件夹
},
{test: /\.less/,loader: 'style!css!less'},
//加载css代码,将css以内联的形式打包到页面中
{test: /\.css/,loader: 'style!css'},
//配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式(其实应该说超过8kb的才使用url-loader 来映射到文件，否则转为data url形式)
{test: /\.(woff|woff2|ttf|svg|eot)/,loader: "url?limit=8192"},
{test: /\.(jpg|png|gif|jpeg)$/,loader: "url?limit=8192"},
//配合ExtractTextPlugin 单独将css打包为一个文件
// {test: /\.less/,loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},//
// {test: /\.css/,loader: ExtractTextPlugin.extract("style-loader", "css-loader")}//
]
},
//启动此服务的时候，编译后的产出文件放在内存里,在build目录下看不见,但也不会删除原来已经有的文件
devServer: {
stats: { colors: true }, //显示颜色
port: 8080,//端口
contentBase: 'build',//指定静态文件的根目录
inline:true, //设置自动刷新
hot:true,//模块热加载
host:"0.0.0.0"//设置为可以使用ip127.0.0.1访问
},
plugins:[
//区分环境标识
definePlugin,
//模块热加载
new webpack.HotModuleReplacementPlugin(),
// new ExtractTextPlugin("bundle.css"),//css单独打包成一个文件
//自动产出html
new HtmlWebpackPlugin({
title:'this is html title',
template:'./src/view/index.html',
filename:'index.html'
}),
//自动打开浏览器
new openBrowserWebpackPlugin({url:'http://localhost:8800'}),
//压缩混淆文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.MinChunkSizePlugin({
compress: {
warnings: false
}
}),
// 查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
new webpack.optimize.DedupePlugin(),
// 按引用频度来排序 ID，以便达到减少文件大小的效果
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin({
minSizeReduce: 1.5,
moveToParents: true
})
],
};
同时package.json文件中
增加命令以区分环境
"release-dev": "export BUILD_ENV=dev && webpack-dev-server", "release-prod": "export BUILD_ENV=prod && webpack-dev-server"
文章评论