webpack学习笔记 | LWY`S BLOG

简单记录下初次学习webpack的过程

# webpack介绍

webpack是一款javascript程序打包器，在安装插件、配置loader后也可以对其他文件（.jsx/.sass/.less等)进行打包。
它强调模块化概念，就是把具有独立功能的代码单独封装为一个模块，比如a.js中使用到了b.js中的功能，b.js使用了c.js或图片等文件的功能时，使用webpack对a.js作为入口文件打包构建后，会连同a.js依赖的所有其他文件（b.js和c.js），最后打包为一个或多个js文件，如bundle.js，在这期间可能会用到loader和pulgin（后文介绍）。
这样，合并了多个js文件只需要请求一次就可以了，除此之外，使用webpack的优点还包括，

使用loader转换语法（ES6->ES5兼容低版本浏览器,.less->.css）等；
项目上线时的文件压缩（去注释，去回车空格等）；
React热插拔等。

# 模块化发展史

在开始使用webpack前，简单介绍下模块化方案的发展史，其实就是
由命名冲突（全局作用域覆盖） -> 命名空间的引入（每个模块导出为一个对象） -> 模块的私有属性可被修改 -> 闭包结合立即执行函数（保护私有变量，暴露可调用方法）的过程。
所以关于模块化的有点无非就是 解除耦合 ，闭包特性实现了 作用域封装 和 可重用（避免变量污染） 。
这里有一个早期的模块化实现方案：

(function(window){
	var name = "susan";
    var sex = "女";
    functioon tell(){
    	console.log("我是"+this.name,"性别"+this.sex);
    }
    window.susanModule = {tell}
})(window)

1
2
3
4
5
6
7
8

# webpack使用

webpack使用需要下载webpack包，下载包需要有npm包管理器，使用npm需要在电脑安装Node.js。
一切就绪后，我们从一个实例开始，
首先进入一个空文件夹，
初始化项目，创建package.json文件，
npm init -y

关于package.json文件

package.json是项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。我们后续下载引用的包都会存在于'node_modules'这个依赖库文件夹中，并在package.json中记录。
当我们将项目整体拷贝给别人的时候，模块文件过多过碎传输速度会很慢，所以不用拷贝'node_modules'，如果项目下有package.json这个文件，只需要在shell下执行npm install即可自动下载相关模块。

随便安装些依赖，会自动写入到package.json，
npm install react react-dom
安装webpack，一个是webpack一个是webpack命令行工具，
npm install webpack webpack-cli -d

关于 '-g -d' 及开发依赖、项目依赖的解释

安装包时 -g是全局安装，不会在node_moudle和package.json中出现，并且在其他项目中也可以使用；
-S是当前项目安装，默认为-S，是项目开发阶段和线上运营阶段都需要依赖的第三方包（项目依赖）；
-D也是当前项目安装，为--save-dev的简写，是项目线上运营时不需要的依赖包（开发依赖）。
-S安装的包会被添加在package.json的dependencies字段中，-D安装的包会被添加在devDependencies中。
当我们想整体拷贝一个项目并进行二次开发时，可以用npm install命令，将dependencies和devDependencies字段的模块都下载下来；当我们只想在服务器上部署时，不进行开发，那么运行npm install --production就不会安装开发依赖；
运行npm install --only=dev安装项目所需依赖时，与--production相反，只安装开发依赖。

在终端控制台输入，
webpack
默认是以src目录中的index.js 作为入口文件，出口文件为dist目录中的main.js，
若要更改可新建’webpack.config.js‘配置entry,output前者控制打包哪些文件，后者控制打包后的名字和路径（使用path模块设置绝对路径）。entry的相对路径是基于webpack.config.js判定的，如

const path = require('path');

module.exports = {
    mode: 'development', // development, production 或 none
    entry: './index.js', // 入口文件路径
    output: { // 出口文件路径和打包之后的名字
        path: path.join(__dirname, 'src', 'dist'), //绝对路径
        filename: 'bundle.js'
    }
}

1
2
3
4
5
6
7
8
9
10

# webpack serve

webpack serve的作用是保存文件时自动重新打包，不需要反复输入webpack，而且不会在dist目录生成实际的文件，存在于内存之中，用于临时调试，预览结果所见即所得，
安装，
webpack-dev-server -g
配置，

module.exports = {
    devServer: {
        port: 3000, // 服务端口
        publicPath: '/src/dist' // 打包后的路径
    }
}

1
2
3
4
5
6

启动，
webpack serve
默认启动文件是同级目录中的index.html

# loader加载器

对其他语言的拓展，

# plugin

监听事件改变打包文件的结果，比如压缩功能，去掉注释空格换行等。

babel 用来把es6转换为es5

# HRM 热插拔

可以在不刷新页面的情况下，更改文件使页面做出改动。

……