核心概念
核心概念还是推荐看官方文档,这里只是个人的一些小见解，大部分还是借鉴了官方文档。
什么是webpack？
webpack 是 JavaScript 应用程序的打包工具。在处理应用程序的时候，它会内部创建一个依赖图（dependency graph），用于映射到项目中所需要的每个模块，然后将这些依赖生成到一个或者多个bundle。
什么是依赖图（dependency graph）
我们在使用jQuery的时候，经常这样引用代码
<script src="jquery.min.js"></script>
<script src="jquery.some.plugin.js"></script>
<script src="main.js"></script>
但是这样实际上是非常慢的，因为需要发送了多次的 HTTP 请求。
实际上我们可以在打包的时候，将它们放在一起，这样只需要请求一个文件。
// build-script.js
var scripts = [
'jquery.min.js',
'jquery.some.plugin.js',
'main.js'
].concat().uglify().writeTo('bundle.js');
// Everything our app needs!
<script src="bundle.js"></script>
现在，我们可以使用 Common.js 或者 ES6 中的模块调用将 JavaScript 文件按需要引入。
// Version.js
module.exports = { version: 1.0 };
// App.js
var config = require('./Version.js');
console.log('App Version:', config.version);
然而浏览器并不支持require(),所以我们使用打包工具，也就是像 webpack 一样的工具将类似上面的文件转换到“bundle.js”文件中，这样浏览器就可以运行了。
我们为什么要用webpack
- 如果项目很小的时候，其实是不需要用到 webpack 的，反而显得累赘
- 如果你的项目非常复杂，并且有很多静态资源的时候，比如图片、字体等等。那么webpack就非常需要了。
入口（entry）
入口起点（entry point）指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，webpack 会找出有哪些模块和 library 是入口文件（直接或者间接）所依赖的。
单文件入口
module.exports = {
entry: './path/to/index.js'
}
多文件入口
如果你有两个页面，demo1 和 demo2。当你访问 demo1 页面的时候，不想要加载 demo2 的代码，那么你就需要生成多个 bundle 文件：也就是为每个页面创建自己的入口文件
// webpack.config.js
module.exports = {
entry: {
Demo1: './demo1.js',
Demo2: './demo2.js'
},
output: {
path: 'build',
filename: '[name].js' // name是基于上边entry中定义的key
}
};
上面的最后生成的代码将在demo1页面中插入
<script src="build/demo1.js"></script>
输出（output）
output 属性告诉 webpack 在哪里输出它所创建的 bunbles，以及该如何命名这些文件。
可以在配置中指定一个 output 字段，来配置这些处理的过程：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
以上的配置中，我们可以通过 output.filename 定义 webpack bundle 的名称，通过 output.path 来定义我们想要生成的 bundle 的位置。
loader
webpack 中，只支持 JavaScript 。但是我们在实际项目中，经常会引用到相关不是 JavaScript 的文件，比如 CSS 文件。为了解决这个问题，webpack 提供了loader。根据不同的文件，会有不同的 loader 先将它们转换成相应有效的模块，然后添加到依赖图中，这样就可以提供给应用程序使用了。
// webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
};
以上我们可以一个 module 对象定义了一个 rules 属性，里面包含了 test 属性和 use 属性。其中 test 用于匹配是否在 require()/import 语句中包含后缀为 .css 的路径。use 属性用于如果匹配到的时候，使用 css-loader 进行转换。
插件（plugins）
loader 被用于转换某些类型的模块，而插件的功能则会更加强大，它的覆盖范围包括：打包优化、资源管理和注入环境变量。
想要使用一个插件，你只需要 require() 它，然后将它添加到 plugins 数组中。如下所示：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
示例中，html-webpack-plugin 会在应用程序中自动生成一个 HTML 文件，然后自动注入所有生成的 bundle。
如何调用webpack
我们经常在 package.json 文件中可以看到类似以下的代码:
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack -p"
}
其中 webpack -p 命令是什么意思?估计你也已经猜到了，它是一种调用 webpack 的方式。
-
webpack开发环境下编译 -
webpack -p产品编译以及压缩 -
webpack --watch开发环境下持续的监听文件的变动来进行编译（非常快） -
webpack -d引入source maps -
webpack --colors可以使编译的输出有颜色
注意
-
webpack -p会删除所有无作用代码，也就是说那些包裹在一些全局变量下的代码块都会被删除，这样就能保证这些代码不会因为发布上线而泄露。
常用实践
掌握核心概念之后，我们可以通过一些 demo 进行实践。
编译JavaScript
使用 webpack 去加载、编译 CoffeeScript 和 JSX+ES6.这里也就是 loader 的使用。
// webpack.config.js
module.exports = {
entry: './main.js', // 入口文件
output: {
filename: 'bundle.js' // 打包输出的文件
},
module: {
loaders: [
{
test: /\.coffee$/, // test 去判断是否为.coffee的文件,是的话就是进行coffee编译
loader: 'coffee-loader'
},
{
test: /\.js$/, // test 去判断是否为.js,是的话就是进行es6和jsx的编译
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
如果你希望在 require 文件的时候，省略文件的扩展名，只需要在 webpack.config.js 中添加 resolve.extensions 来配置。
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
resolve: {
// 现在你require文件的时候可以直接使用require('file')，不用使用require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
全局的变量配置
在开发过程中，有些代码我们只在开发环境中使用（比如日志），或者在不同平台中执行不同的代码。那么我们将会使用到以下类似的代码。
if (__DEV__) {
console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
同时还要在 webpack.config.js 中配置这些变量，这样 webpack 就能够识别它们了。
// webpack.config.js
// definePlugin 会把定义的string 变量插入到Js代码中。
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
配置完成后，我们就可以使用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack （可以在package.json中配置）来打包代码了。还是上面的那个注意事项webpack -p 会删除所有无作用代码，也就是说那些包裹在这些全局变量下的代码块都会被删除，这样就能保证这些代码不会因发布上线而泄露。
网友评论