概述

1、作用：随着前端工程越来越大，我们需要吧大文件拆成小的模块，以提高可维护性和可扩展性。当模块越来越多，我们就需要借助工具来管理我们的模块。webpack就是这种帮助我们管理复杂项目的工具。webpack是打包工具（bundler）。

2、对比其他工具的优势：tree shaking、 懒加载、 代码分隔。

3、webpack4升级：速度更快，大型项目节约90%的构建时间（webpack和node 版本要租足够新）。内置更多默认配置。变更了很多API。

loader

一句话概念：打包方案。

webpack默认处理js文件，它知道怎么处理js。然而当webpack遇到其他文件的时候，比如jpg图片或者css时候是不知道如何处理的。这时候需要用到loader的概念。

如果你遇到.jpg结尾的文件，你就用‘file-loader’打包，官方文档注明：

https://webpack.js.org/loaders/

file-loader做的事： 移动文件到产出目录，改文件名，返回路径给引用的位置。

module.exports = {
 module: {
 rules: [
 {
 test: /\.(png|jpg|gif)$/,
 use: [
 {
 loader: 'file-loader',
 options: {}
 }
 ]
 }
 ]
 }
}

类似的，在vue中我们经常会import对应的loader：vue-loader，详情可见：

https://vue-loader.vuejs.org/zh/

特别要注意的是，在使用特殊的loader 之前要先用 npm install 安装相应的loader。

样式相关loader

当我们想要使用webpack打包css时候， 要配合两个loader：style-loader和css-loader

module.exports = {
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }
 ]
 }
}

css-loader解释(interpret)@import和url()，会import/require()后再解析(resolve)它们。

style-loader 在使用局部作用域 CSS时，模块导出生成的（局部）标识符(identifier)。

如果使用sass或者less等，需要 npm install 并在配置文件里配置相应的loader。

还有一个很好用的loader ： postcss-loader 会为我们自动加上-webkit等属性前缀。具体请参考webpack文档。

css 模块化打包

为了解决css的耦合和冲突，例如一处css修改，影响了两个位置。css模块化规范：

https://github.com/css-modules/css-modules

这时候要用到 css-loader中的 modules参数 ，来启用 CSS 模块规范。

声明：

本文完全原创，转载请联系我本人并标明出处。