初识Webpack（一）

webpack.jpg

1.1什么是WebPack

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并生成一个或多个 bundle，将其打包为合适的格式以供浏览器使用。
webpack构建：构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

1.代码转换：TypeScript 编译成 JavaScript、SCSS或Less 编译成 CSS 等。
2.文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3.代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4.模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
5.自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器,nodemon。
6.代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
7.自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建给前端开发注入了更大的活力，解放了我们的生产力,更加方便了我们的开发。

1.2 什么是 webpack 模块

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句
样式(url(...))或 HTML 文件()中的图片链接
详细请看官网文档： Modules MODULES

1.3 搭建Webpack环境

去官网下载node

// 查看node版本号
node -v
// 查看npm版本号
npm -v

1.4 初始化项目

mkdir webpack-test
cd webpack-test
//初始化webpack配置清单package.json 
npm init -y    //-y会使用默认配置，不会中断询问

1.5 安装webpack

不推荐：

//全局安装，因为如果有两个项目用了webpack不同版本，就会出现版本不统一运行不起来的情况。只有卸了当前版本安装对应版本非常麻烦。
npm install webpack webpack-cli -g
//查看版本
webpack -v
//全局卸载
npm uninstall webpack webpack-cli -g

推荐使用：

//在项目里安装webpack。可以在不同项目中使用不同的webpack版本。
cd webpack-productname
npm install webpack webpack-cli -D
//查看版本
npx webpack -v
//查看对用包的详细信息
npm info webpack
//安装指定版本包
npm install [email protected] webpack-cli -D

webpack-cli：使我们们可以在命令行里正确的使用webpack

1.6 webpack的配置文件

webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。通常，你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，webpack 会自动使用它。

在项目根目录下创建 webpack.config.js 文件，这是webpack默认配置文件

const path = require('path')

module.exports = {
    //默认是production，打包的文件默认被压缩。开发时可以设置为development，不被压缩
    mode:'production', 
    //打包项目的入口文件
    entry: './index.js',
    //打包项目的输出文件
    output: {
        //自定义打包输出文件名
        filename:'bundle.js',
        //输出文件的绝对路径
        path: path.resolve(__dirname,'bundle')
    }
}

也可以自己指定配置文件来完成webpack的打包：

npx webpack --config + 自定义配置文件

详细请看官方文档：概念配置