Webpack理论与实践1

Webpack理论与实践

解决什么样的问题

随着前端项目越来越复杂，普遍的一个做法是模块化项目管理，而早期的前端模块化有以下这么几种方式

1. 文件划分 - 不同的模块就放到不同的文件
	module1.js
	module2.js
	
	// module1.js
	function a() {
        console.log("module1");
    }
	// module2.js
	var module2Data = "123";

这种方式的缺点也比较明显：
1） 变量没有进行私有化，可以从外部访问
2）很容易命名冲突
3）如果两个模块互相依赖，很难看出依赖关系，无法管理模块间的依赖关系

2 命名空间
	// module1.js
	window.module1 = {
        a: function() {
            console.log("module1");
        }
    }
	// module2.js
	window.module2 = {
        module2Data: "123"
    }

这种方式就可以解决1中的 命名冲突问题，但其他问题还是存在的

3 立即执行函数
// module1.js
(function() {
    var moduleName = "module1";
    function a() {
        console.log("module1");
    }
    
    window.module1 = {
        a: a
    }
})();

这种方式继续解决了2没有解决的问题，使得变量私有化，不会在模块外部被访问，但仍然还是无法管理模块间的依赖关系

4 带参数的立即执行函数
(function($) {
    var moduleName = "module1";
    function a() {
        console.log("module1");
    }
    
    window.module1 = {
        a: a
    }
})(jQuery);

这种方式继续完善了之前的模块化方式，可以管理模块间的依赖关系了。

即使上面解决了最初的问题，但是后期维护还是需要很大的成本的，比如上面模块依赖了jQuery，那么就要先去引入，如果后面又不需要jQuery了，那么还需要手动去掉jQuery库，同时不同开发人员也可能会有不同的实现方式，所以需要有一个模块化规范来规定如何实现模块化。

COMMONJS: Node内置的模块化规范，不能在浏览器运行
AMD  define/require[RequireJS为代表]
CMD  define/seajs.use[SeaJS为代表]
ESModule  ES6中定义的一种模块化规范，有望成为浏览器和服务端共同的模块化规范。

ESModule已逐渐成为主流的模块化规范，但因为存在浏览器兼容问题；并且可能整个项目里面不仅仅只是把js文件当作一个模块，可能还会存在一些其他类型的资源，Webpack、Gulp、RollUp这一类打包工具就应运而生。今天主要来跟大家分享Webpack的一些使用和原理。
这里使用Webpack官网的一句话：

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

使用

依赖环境

Node
Webpack
Webpack-cli

如果使用vue脚手架搭建项目的话，已经将这些安装好了，并且vue-cli3里面，vue.config.js里面可以另外自定义webpack的相关配置。

常用配置

entry

entry: './src/index.js'

表示从当前目录的src/index.js开始进行打包，可以是css等其他文件，一般做项目因为依赖关系，所以会把js文件作为打包入口。

output

表示打包结果放置的名称于位置，名称也可以由一些变量进行定义

id         ----- chunk的唯一标识，从0开始
name       ----- chunk的名称
hash       ----- chunk的唯一标识的Hash值
chunkhash  ----- chunk内容的Hash值

devServer
有很多情况下，开发环境可能与生产有一些不同的需要，所以webpack有一个devServer配置，专门可以用来配置开发环境
modules
modules主要是用来配置loader的，因为除了js文件，我们项目里还会有别的类型的文件，css，file，img，sass等等，所以需要不同的文件使用不同的loader来加载

常用的loader主要用

css-loader
sass-loader
style-loader
file-loader
url-loader
babel-loader
postcss-loader
eslint-loader
vue-loader......

4.1 手写loader

配置
rules: [{
	test: /.md$/,
	use: ['./markdown-loader']
}]

./markdown-loader.js
const markdown = require("marked");
module.exports = source => {
	const html = markdown(source);
	const code = `module.exports=${JSON.stringify(html)}`
	return code;
}

./index.js
import plan from './plan.md'
console.log(plan);