Webpack作为非常受欢迎的前端工具，必然有它的厉害之处。所以单独开篇文章记录学习Webpack的使用要点，主要分以下几部分学习：
- 后起之秀为何这么受欢迎？
- webpack的安装和基本工作流程
- 如何使用loaders
- 使用Webpack进行vue组件化开发
- webpack的常用命令行及热加载
- webpack的插件和配置文件的最佳实践
- webpack的两个分析工具
1.后起之秀为何这么受欢迎？
webpack之前有gulp、require等构件工具，但仍然会迅速的成为最受欢迎的前端构建工具。主要是因为他在减少http请求和静态文件体积两方面做的更好，此外还有很多灵活的插件和loader机制。
2.webpack的安装和基本工作流程
webpack官网：http://webpack.github.io/
安装命令：npm install webpack -g
-
总体架构图
-
工作流程示例：
创建moduleOne.jsconsole.log('Module one')
创建moduleTwo.js
console.log('Module two')
入口文件entry.js
require('./module-one.js');
require('./module-two.js');
使用webpack打包命令生成bundle.js
webpack js/entry.js bundle.js
在客户端客户端页面index.html中引入bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack learning</title>
</head>
<body>
<h1>Webpack is nice!</h1>
<script src="bundle.js"></script>
</body>
</html>
这样最简单的打包示例就完成了。
实际项目中一般不直接在命令行中配置入口和出口文件来进行打包，而是通过配置文件webpack.config.js来控制，OK！我们创建一个webpack.config.js文件。
module.exports = {
devtool:"sourcemap",
entry:"./js/entry.js",
output: {
filename: "bundle.js"
}
};
其中devtool声明文件映射关系、entry和output分别声明入口和出口文件。然后通过webpack命令直接打包。
bogon:webpack-learning chengyanfang$ webpack
Hash: 2ff33cd9e057fd7d476f
Version: webpack 2.2.1
Time: 92ms
Asset Size Chunks Chunk Names
bundle.js 3.04 kB 0 [emitted] main
bundle.js.map 3.37 kB 0 [emitted] main
[0] ./js/module-one.js 73 bytes {0} [built]
[1] ./js/module-two.js 73 bytes {0} [built]
[2] ./js/entry.js 104 bytes {0} [built]
此时工程中除了生成bundle.js 还生成了 bundle.js.map。
接下来引用jquery来扩展moduleOne的功能，进入项目目录：
npm init //初始化npm
npm install jquery --save-dev //引入jquery
然后修改moduleOne.js
//声明jquery的$变量
var $ = require("jquery");
//执行jquery命令，替换index.html的h1元素内容
$('h1').html('It is real');
然后webpack重新打包测试，顺利完成目标。
此时jquery只是在moduleOne.js中存在，而不是全局存在，这正是webpack的魅力所在。
3.如何使用loaders
正如上节示例所示，webpack的强大之处在于几乎可以把所有的静态文件打包到一个js文件里。然后他会使用各种loader来解析这个js文件的内容。所以这节主要学习各种loader。
首先，通过npm下载css-loader和style-loader
npm install css-loader style-loader --save -dev
然后，在webpack配置文件中声明，某个类型的文件需要使用某个类型的loader来处理。修改webpack.config.js如下：
module.exports = {
devtool:"sourcemap",
entry:"./js/entry.js",
output: {
filename: "bundle.js"
},
module: {
loaders:[
{
test:/\.css$/,
loader:"style-loader!css-loader"
}
]
}
};
然后，创建一个style.css文件用于测试：
body{
background: cornflowerblue;
}
之后在entry.js中把style.css包含进来：
//css
require('../css/style.css');
这样css文件就会通过webpack打包进bundle.js，然后在index.html中引入bundle.js 进而style.css成功渲染index.html的body....（瞅瞅我这英文讲的）。重新打包测试，成功OK！
接下来使用有关es6种关于babel的loader：
npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
然后在webpack.config.js中增加babel的loader配置(使得除node_modules下的js文件之外，其余全部使用ES6的语法处理js文件)：
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/
}
同时需要在更目录增加.babelrc文件进行babel设置:
{
presets: ['es2015','stage-0'],
plugins: ['transform-runtime']
}
然后webpack打包测试，成功OK！
4.使用Webpack进行vue组件化开发
首先通过npm安装vue相关的loader
npm install vue vue-loader vue-html-loader vue-style-loader vue-template-compiler --save-dev
接着配置webpack.config.js中的loader:
{
test:/\.vue$/,
loader:"vue-loader"
}
然后创建heading.vue文件：
<template>
<div>
<h1>Hello {{message}}</h1>
</div>
</template>
<script>
export default{
data(){
return{
message:'vue.js'
}
}
}
</script>
然后在entry.js中引入heading.vue
//vue
import Vue from 'vue'
import Heading from './components/heading.vue';
new Vue({
el:"#app",
components : {Heading}
});
之后在index.html中引入Heading组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack learning</title>
</head>
<body>
<div id="app">
<Heading></Heading>
</div>
<h1>Webpack is nice!</h1>
<script src="bundle.js"></script>
</body>
</html>
最后还要配置webpack.config.js 来避免运行时问题,完整配置如下：
module.exports = {
devtool:"sourcemap",
entry:"./js/entry.js",
output: {
filename: "bundle.js"
},
module: {
loaders:[
{
test:/\.css$/,
loader:"style-loader!css-loader"
},
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/
},
{
test:/\.vue$/,
loader:"vue-loader"
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
};
最后webpack打包测试，成功OK！
5.webpack的常用命令行及热加载
优化及文件压缩命令,对于线上部署时非常有用
webpack -p
使用watch机制，实时监控源码修改，而不需要每次都执行webpack；一次执行之后，每次更新代码只需要刷新下浏览器即可。
webpack -w
更进一步，webpack还提供修改代码后不需要刷新浏览器就可以实时查看效果的热更新技术，通过以下步骤进行配置：
首先，全局安装webpack-dev-serve
npm install webpack-dev-server -g
然后进入到项目目录再次执行
npm install webpack --save-dev
最后执行以下命令启动localhost服务器，并且设置flag为热加载
webpack-dev-server --inline --hot
打开http://localhost:8080/，修改代码测试，成功OK！
6.webpack的插件和配置文件的最佳实践
首先获取当前环境变量
var debug = process.env.NODE_ENV != "production"
然后做如下差异化配置：
-
线上环境时不需要生成sourcemap
devtool:debug ? "sourcemap" : null, 线上环境时增加一些压缩和优化的插件 (插件列表查询地址)
plugins:debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
//UglifyJsPlugin混淆作用
new webpack.optimize.UglifyJsPlugin({mangle:false,sourcemap:false}),
- 最终的webpack.config.js文件内容
var debug = process.env.NODE_ENV != "production"
module.exports = {
devtool:debug ? "sourcemap" : null,
entry:"./js/entry.js",
output: {
filename: "bundle.js"
},
module: {
loaders:[
{
test:/\.css$/,
loader:"style-loader!css-loader"
},
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/
},
{
test:/\.vue$/,
loader:"vue-loader"
}
]
},
plugins:debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({mangle:false,sourcemap:false}),
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}
};
7.webpack的两个分析工具
-
Analyse工具
Analyse工具用来分析整个项目中的引用package及之间关系。使用方式如下：
首先生成用来分析的stats.json文件到项目目录下：
webpack --profile --json > stats.json然后打开 (analyse分析工具)上传stats.json进而查看整个项目的信息。
-
webpack-visualizer工具
打开 (webpack-visualizer分析工具)上传stats.json，然后就可
