深入浅出Webpack学习笔记

基本概念

常用的构建工具

所有的构建工具所做的工做大致一样，都是把源代码翻译转换成可执行的代码，包括如下内容：

代码转换：TypeScript转换成JavaScript，SCSS转换成CSS；
文件优化：压缩JavaScript、CSS、图片等资源，利用一些优化手段，如摇树优化，移除无关代码；
代码分割：提取多个页面的公共代码、提取首屏不需加载的代码让其异步加载，防止首次进入应用等待时间过长；
模块合并：在一些模块化的项目中会有很多个模块和文件，需要构建工具把这些模块文件分类合并成一个文件；
自动刷新：监听本地代码，自动构建加载，方便开发；
代码校验：提交代码前进行代码规范检查；
自动发布：更新完代码后，自动构建出线上代码，推送到线上或其他环境上；

Npm Script

Grunt

Gulp

Fis3

Webpack

https://www.webpackjs.com/
Webpack是一个模块化打包工具，专注于构建模块化项目，在Webpack眼里一切文件都是模块，通过Loader转换翻译文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。

之所以一切文件皆模块，如：JavaScript、CSS、SCSS以及图片等资源，在Webpack眼中都是模块，因为这样可以更好的理清描述各个模块之间的依赖关系，方便Webpack对模块进行打包组合，输出浏览器使用的静态资源。

简单使用：

module.exports = {
    // 定义入口文件
    entry: './index.js',
    // 定义打包输出文件
    output: {
        // 最终会把依赖的所有模块打包成一个bundle.js文件
        filename: './bundle.js'
    }
}

Webpack的优点

专注于处理模块化项目，可以做到开箱即用，一步到位；
通过Plugin进行扩展，完整好用又不失灵活；
使用场景丰富，除了web端，其他场景也可以；
社区活跃；
开发体验好；

缺点是只能采用模块化开发项目。

Rollup

安装与使用

安装只需要一行命令，当然可以全局安装，但是不推荐。

npm install -D webpack

或者指定版本号:

npm install -D [email protected]

或者直接安装最新版:

npm install -D webpack@beta

注意：如果你使用的webpack版本较新，在webpack4.x测试下，你需要额外安装一依赖: npm i webpack-cli @webpack-cli/init。可以参考webpack-cli

运行Webpack命令：

node_modules/.bin/webpack

或者通过配置npm script来运行：

"script": {
    "start": "webpack --config webpack.config.js"
}

具体如何使用？

前面有了基本使用方法，但是具体落实到代码上该怎么写？我们可以通过构建一个采用CommonJs模块化的简单Demo来理解。

index.html

index.html文件内容包含了一个script和一个id等于app的div。

show.js

show.js文件定义了一个show函数，该方法将给页面中的div插入一段文本；同时，我们利用CommonJs规范，将该函数导出。

function show() {
    document.getElementById('app').innerText = 'hello world';
}
module.exports = show;

main.js

main.js文件将show.js引入，并执行show函数。

const show = require('./show.js');
show();

webpack.config.js

执行webpack构建执行命令的时候，会自动读取项目根目录下的webpack.config.js文件，所以我们新建该文件，并指明入口文件和打包输出文件。

const path = require('path');
module.exports = {
    entry: './main.js',
    output: {
        filename: './bundle.js'，
        path: path.resolve(__dirnam, './dist') // 输出路径
    }
}

之所以使用CommonJs规范来导出webpack配置，是因为webpack运行在Node下，所以我们要使用CommonJs规范来描述一个如何构建的Object对象。

执行webpack构建命令后，在项目根目录下会多出一个dist文件夹，以及一个bundle.js文件。bundle.js依赖main.js和show.js两个文件以及内置的webpackBootstrap启动函数，从入口文件main.js出发，识别出源码中模块化导入的语句，把入口文件所依赖的模块或文件递归的打包到一个文件中：bundle.js文件。

此时，直接打开index.html文件可以正常显示一段文案。

使用Loader

文件中我们添加一段文本居中的样式:

#app {
    text-align: center;
}

然后，我们在main.js引入这个CSS文件:

// 引入css
require('./main.css');

const show = require('./show.js');
show();

编写工作做完后，我们自然的想到直接执行webpack构建命令，但是此时还不可以，因为Webpack原生仅支持解析JavaScript文件，如果需要
解析其他类型的文件，需要引入相应的Loader，这里，我们因为需要解析CSS，所以需要引入CSS Loader。

手动的去配置webpack.config.js文件:

const path = require('path');
module.exports = {
    entry: './main.js',
    output: {
        filename: './bundle.js',
        path: path.resolve(__dirname, './dist'),
    },
    module: {
        rules: [
            {
                // 用正则匹配css文件
                test: '/\.css$/',
                use: ['style-loader', 'css-loader?minimize'], // minimize：需要进行压缩
            }
        ]
    }
}

上面我们简单的配置了一个Loader规则。

Loader相当于一个翻译员，将某个文件源码翻译成可执行的代码。配置规则要求我们在rules数组中配置一个对象，指定test属性值来匹配那些文件需要翻译，通过use来指定需要使用哪些Loader，这里我们使用了style-loader和css-loader。

需要注意的是，在配置use属性的时候：

use属性值是一个数组，数组中的每个元素为loader的名字，尤其要注意的是，Loader的执行顺序是由后到前;
可以给Loader以URL querystring的形式传递参数，比如前面的css-loader?minimize，具体参可以参考所使用的Loader文档;

理解了Loader后，我们需要进行安装相应的Loader依赖:

npm install -D style-loader css-loader

所有准备工作做完后，我们执行构建命令:

npm start 或者 node_modules/.bin/webpack

然后再观察bundle.js文件，会发现代码更新了，并且CSS代码也被打包了进来，打开index.html，可以看到居中效果。

这里我们提一下，CSS之所可以写在JavaScript中，归功于刚才引入的style-lader，大概远离就是将CSS样式以字符串的形式存储到JavaScript对象中，然后在网页执行的时候，通过DOM操作动态的加入到页面中的

Webpack-基础概念