深入浅出 webpack 之基础配置篇 (2)

通过调用入口函数 ./src/index.js 然后递归的去把所有模块找到，由于递归会进行重复计算，因此 __webpack_require__ 函数中有一个缓存对象 installedModules。

loader

我们知道 webpack 可以打包 JavaScript 模块，而且也早就听说 webpack 还可以打包图片、字体以及 css，这个时候就需要 loader 来帮助我们识别这些文件了。

[注意] 碰到文件不能识别记得找 loader 。

打包图片文件

修改配置文件：webpack.config.js

const path = require('path'); module.exports = { mode: 'development', entry: { main:'./src/index.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname,'dist') }, module:{ rules:[ { test:/\.(png|svg|jpg|gif)$/, use:{ loader: 'url-loader', options: { name: '[name]_[hash].[ext]', outputPath:"images", // 打包该资源到 images 文件夹下 limit: 2048 // 如果图片的大小，小于2048KB则时输出base64，否则输出图片 } } } ] } }

修改：src/index.js

import moduleA from "./moduleA"; import header from "./header.jpg"; function insertImg(){ const imageElement = new Image(); imageElement.src = `dist/${header}`; document.body.appendChild(imageElement); } insertImg();

执行打包后，发现可以正常打包，并且 dist 目录下也多出了一个图片文件。

我们简单分析：

webpack 本身其实只认识 JavaScript 模块的，当碰到图片文件时便会去 module 的配置 rules 中找，发现 test:/\.(png|svg|jpg|gif)$/ ，正则匹配到图片文件后缀时就使用 url-loader  进行处理，如果图片小于 2048KB （这个可以设置成任意值，主要看项目）就输出 base64 。

打包样式文件 { test:/\.scss$/, // 正则匹配到.scss样式文件 use:[ 'style-loader', // 把得到的CSS内容插入到HTML中 { loader: 'css-loader', options: { importLoaders: 2, // scss中再次import scss文件，也同样执行 sass-loader 和 postcss-loader modules: true // 启用 css module } }, 'sass-loader', // 解析 scss 文件成 css 文件 'postcss-loader'// 自动增加厂商前缀 -webket -moz，使用它还需要创建postcss.config.js配置文件 ] }

postcss.config.js

module.exports = { plugins: [ require('autoprefixer') ] };

打包解析：

当 webpack 遇到 xx.scss 样式文件是；

依次调用 postcss-loader 自动增加厂商前缀 -webket -moz ；

调用 sass-loader 把 scss 文件转换成 css 文件；

调用 css-loader 处理 css 文件，其中 importLoaders:2 ，是 scss 文件中引入了其它 scss 文件，需要重复调用 sass-loader postcss-loader 的配置项；

最后调用 style-loader 把前面编译好的 css 文件内容以 <style>...</style> 形式插入到页面中。

[注意] loader的执行顺序是数组后到前的执行顺序。

打包字体文件 { test: /\.(woff|woff2|eot|ttf|otf)$/, // 打包字体文件 use: ['file-loader'] // 把字体文件移动到dist目录下 } plugins

plugins 可以在 webpack 运行到某个时刻帮你做一些事情，相当于 webpack 在某一个生命周期，调用插件做一些辅助的事情。

html-webpack-plugin

作用：

会在打包结束后，自动生成一个 HTML 文件（也可通过模板生成），并把打包生成的 js 文件自动引入到 HTML 文件中。

使用：

const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new HtmlWebpackPlugin({ template: 'src/index.html' // 使用模板文件 }) ] clean-webpack-plugin

作用：

每次输出打包结果时，先自动删除 output 配置的文件夹

使用：

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); plugins: [ ... new CleanWebpackPlugin() // 使用这个插件在每次生成dist目录前，先删除dist目录 ] source map