参考资料: https://www.webpackjs.com/(中文文档) https://www.webpackjs.com/(官方文档)
首先有必要说明一下, 本文侧重讲解 webpack 基本配置属性, 不附带实例, 将会以通俗易懂的形式地讲解; 如若需要实例进行相关练习, 可将本文作为理论基础;
Webpack 是前端项目自动化构建工具, 本质上, webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 当 webpack 处理应用程序时, 它会递归地构建一个依赖关系图(dependency graph), 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个 bundle.(官网定义).
那么用我们人话来说: webpack 是一个前端模块化的解决方案, 更侧重点打包, 可以把开发中的资源文件 (图片, JS 文件, CSS 文件等) 看成是一个个的模块, 然后通过 webpack 提供的 loader(加载器)和 plugins(插件)来进行处理, 合并以及压缩, 打包成符合生产环境, 体积更小的文件资源, 以方便提升浏览器的渲染速度;
首先我们要理解一下 webpack 的四大核心概念:
入口(entry)
出口(output)
- loader(加载器)
- plugins(插件)
入口(entry):
webpack 入口指的是通过配置来指示 webpack 的入口文件, 即从哪里开始, 我们可以在 webpack 中配置 entry 属性, 来指定入口文件的路径;
我们可以看一个简单的案例:
- // 必须将模块抛出 webpack 才能访问得到
- module.exports = {
- //entry 属性指定入口文件 值为相对路径
- entry: './src/app.js'
- }
出口(output):
出口即告诉 webpack 在哪里输出它所创建的 bundles, 以及如何命名这些文件, 输出的文件目录路径; 也就是说在你用 webpack 打包的时候可以通过添加 output 属性, 来设置最终经过 webpack 打包输出后的文件名以及输出路径;
- // 引入 node 的 path 模块
- const path = require('path');
- module.exports = {
- // webpack 执行入口文件
- entry: './src/app.js',
- // 出口
- output: {
- // 把所有依赖的模块合并输出到一个 bundle.JS 文件
- filename: 'bundle.js',
- // 输出文件都放到 dist 目录下
- //__dirname 是 node 环境中全局变量, 表示当前目录
- path: path.resolve(__dirname, './dist'),
- }
- };
加载器(loader):
loader 是让 webpack 能够去处理一些非 Javscript 类型的文件(webpack 自身只能够识别原生 JS 和 ES5),loader 可以将所有类型的文件转为 webpack 能处理的有效模块, 然后就可以通过 webpack 的打包能力, 对这些文件进行处理; loader 的配置有两个选项:
test: 一般都是正则表达式, 用于匹配文件类型;
use: 可以是 key:value 的形式也可以是数组, 用来告诉 webpack 使用什么 loader 来加载文件
- // 引入 node 的 path 模块
- const path = require('path');
- module.exports = {
- // webpack 执行入口文件
- entry: './src/app.js',
- // 出口
- output: {
- // 把所有依赖的模块合并输出到一个 bundle.JS 文件
- filename: 'bundle.js',
- // 输出文件都放到 dist 目录下
- //__dirname 是 node 环境中全局变量, 表示当前目录
- path: path.resolve(__dirname, './dist'),
- }
- // 模块关键字, 加载器需要在这里进行配置
- module:{
- //rules 为数组, 保存每个加载器的配置
- rules:[
- {
- //test 属性必须配置, 值为正则表达式, 用于匹配文件
- test:/\.CSS$/,
- // 对同一个文件引入多个 loader 的方法
- use:[
- //loader 为 loader 加载器的名称, 必须配置, 值为字符串
- {loader:"style-loader"},
- {loader:"css-loader"}
- ],
- // 过滤, 排除 node_module 目录下的文件
- exclude:/node_module/,
- // 指定匹配文件的范围 指定 / demo / 目录下的. CSS 文件进行匹配
- include:/demo/
- }
- ]
- }
- };
webpack 中规定, 在 webpack 中定义 loader 时, 需要定义在 module.rules 中, 否则会报错; test 和 use 两个属性分别指定了匹配文件的规则和用什么 loader 来处理, 这两个属性都是必选的, exclude,include 分别表示过滤 (不处理) 某个文件中的文件和指定 (处理) 某个文件夹中的文件, 这两个属性都是可选项;
插件(plugins):
loader 被用于转换某些类型的模块, 而插件则可以用于执行范围更广的任务. 插件的范围包括, 从打包优化和压缩, 一直到重新定义环境中的变量. 插件接口功能极其强大, 可以用来处理各种各样的任务. 要使用某个插件, 你需要 require(引入)插件, 然后添加到 plugins 数组中, 多数插件可以通过选项 option 来自定义
- // 引入 node 的 path 模块
- const path = require('path');
- // 引入 extract-text-webpack-plugin 插件
- const ExtractTextPlugin = require('extract-text-webpack-plugin');
- module.exports = {
- // webpack 执行入口文件
- entry: './src/app.js',
- // 出口
- output: {
- // 把所有依赖的模块合并输出到一个 bundle.JS 文件
- filename: 'bundle.js',
- // 输出文件都放到 dist 目录下
- //__dirname 是 node 环境中全局变量, 表示当前目录
- path: path.resolve(__dirname, './dist'),
- }
- // 模块关键字, 加载器需要在这里进行配置
- module:{
- //rules 为数组, 保存每个加载器的配置
- rules:[
- {
- //test 属性必须配置, 值为正则表达式, 用于匹配文件
- test:/\.CSS$/,
- // 对同一个文件引入多个 loader 的方法
- use:[
- //loader 为 loader 加载器的名称, 必须配置, 值为字符串
- {loader:"style-loader"},
- {loader:"css-loader"}
- ],
- // 过滤, 排除 node_module 目录下的文件
- exclude:/node_module/,
- // 指定匹配文件的范围 指定 / demo / 目录下的. CSS 文件进行匹配
- include:/demo/
- }
- ]
- }
- // 配置插件
- plugins: [
- new ExtractTextPlugin({
- // 自定义配置插件选项
- // 从 .JS 文件中提取出来的 .CSS 文件的名称
- filename: `[name]_[md5:contenthash:hex:8].css`,
- }),
- ]
- };
上面就是 webpack 的四大核心概念, 下面我们来介绍一些常用的插件:
loader 处理 CSS 和 Sass:
默认情况下 webpack 是处理不了 CSS 的代码的, 但是我们可以通过 webpack 的 loader 加载器来处理;
- module.exports = {
- entry: './src/app.js',
- output: {
- path: __dirname + '/dist',
- filename: 'app.bundle.js'
- },
- module: {
- rules: [
- {
- test: /\.CSS$/,
- use: [ 'style-loader', 'css-loader' ]
- }
- ]
- }
- };
在日常开发中, 我们只需要在 webpack.config.JS 文件中写上上面的配置代码即可让 webpack 来处理 CSS 代码和 Sass 代码;
webpack-dev-server:
webpack-dev-server 是 webpack 的一个常用插件, 可以用来在本地上开启服务, 启动浏览器并且可以实时监听文件修改;
- module.exports = {
- entry: './src/app.js',
- ...
- // 进行 webpack-dev-server 插件配置
- devServer: {
- // 端口号, 默认 8080, 可以自定义修改
- port: 9000,
- // 运行 webpack-dev-server 的时候自动打开浏览器
- open: true
- },
- ...
- };
source-map 调试:
开发总是离不开调试, 但是我们用 webpack 给项目打包了之后, 我们是很不方便找到错误或者问题所在的, 当然 webpack 也想到了这一点, 因此 webpack 给我们提供了 source-map 来进行调试;
devtool 选项
source-map
配置结果
在一个单独的文件中产生一个完整且功能完全的文件. 这个文件具有最好的 source map, 但是它会减慢打包速度;
devtool 选项
cheap-module-source-map
配置结果
在一个单独的文件中生成一个不带列映射的 map, 不带列映射提高了打包速度, 但是也使得浏览器开发者工具只能对应到具体的行, 不能对应到具体的列(符号), 会对调试造成不便;
devtool 选项
eval-source-map
配置结果
使用 eval 打包源文件模块, 在同一个文件中生成干净的完整的 source map. 这个选项可以在不影响构建速度的前提下生成完整的 sourcemap, 但是对打包后输出的 JS 文件的执行具有性能和安全的隐患. 在开发阶段这是一个非常好的选项, 在生产阶段则一定不要启用这个选项;
devtool 选项
cheap-module-eval-source-map
配置结果
这是在打包文件时最快的生成 source map 的方法, 生成的 Source Map 会和打包后的 JavaScript 文件同行显示, 没有列映射, 和 eval-source-map 选项具有相似的缺点;
综上所述, 从上到下打包速度越来越快, 不过同时带来的副作用也越多, 较快的打包速度的后果就是对打包后的文件的的执行有一定影响. 在中小型项目中, eval-source-map 是一个比较不错的选择;
cheap-module-eval-source-map 方法构建速度更快, 但是不利于调试, 推荐在大型项目考虑时间成本时使用.
- module.exports={
- devtool:"eval-source-map",
- }
在 webpack 打包之后, 如果报错我们是看不到源文件的, 因为此时文件已经被 webpack 打包了, 这很不方便我们的开发调试, source-map 就是用来解决这个问题的, 通过添加配置 devtool:"eval-source-map" 这一行简单的代码, 我们即可在调试的时候看到我们的源文件进行调试;
来源: http://www.jianshu.com/p/9a43856bfc7e