webpack4基础入门-原创手记-慕课网

什么是Webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。可以看做是模块打包机。

例如上图所示，它做的事情是，分析你的项目结构，找到JavaScript模块以及解析其他拓展语言（Scss，TypeScript等），并将其打包浏览器能够解析的语言使用。

webpack 构建

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容：

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

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

webpack 基础使用

初始化项目

mkdir wp    // 创建文件夹
cd wp   
npm init -y // 初始化项目

初始化项目后会生成package.json文件，我们再里面添加一个scripts：[]语句，如下


{
  "name": "wp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config webpack.config.js",//运行到开发环境
    "build": "webpack --mode production" //进行打包
  },
  "dependencies": {},
  "devDependencies": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装和使用

npm install webpack webpack-cli -g
// OR
yarn global  add webpack webpack-cli

webpack-cli 是使用 webpack 的命令行工具，在 4.x 版本之后，webpack启动命令行的代码放入了webpack-cli 中。如果只安装了webpack，只能在nodejs环境中使用，就不能在命令行中使用。

我们在src文件夹下创建 index.js和test.js 文件

./src/test.js

module.exports = '我的wepback_module_test文件'

./src/index.js

const stra = require('./test.js')
console.log(stra)

保存之后在命令行工具执行 npx webpack 或 npm run build 命令，你就会发现新增了一个 dist目录，里边存放的是 webpack 构建好的 main.js文件。

此时main.js 文件就是我们打包后的文件，我们创建一个HTML文件引入这个main.js，然后在浏览器打开，就可以在控制台就能看到我的wepback_module_test文件被打印出来。

npx 说明

1. npm 5.2.0 以上版本中内置的命令：npx，类似于 npm 简化了项目开发中的依赖安装与管理
2. npx 会自动查找当前依赖包中的可执行文件

@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\webpack-cli\bin\cli.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "%~dp0\..\webpack-cli\bin\cli.js" %*
)
查看从上面的源码，得到npx webpack命令其实
就是执行`node_modules\.bin\webpack-cli.cmd`路径下文件

上述就是webpack4.x零配置简单demo。

缺点：

零配置的webpack缺少很多实际项目需要的功能，所以你还是需要一个配置文件，来完善webpack功能。在当前目录下新建一个webpack.config.js的文件，webpack 运行时默认读取当前项目下的 webpack.config.js 文件作为配置。如果需要运行指定文件名称例：webpack.config.dev.js 需要在命令行运行以下代码来声明以此文件作为配置文件。

npx webpack --config webpack.config.dev.js

了解webpack配置基本概念

webpack.config.js

const path=require('path');
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {},
    plugins: [],
    devServer: {}
}

从上面的webpack.config.js配置文件看到，webpack配置由以下几部分组成。

Entry：入口， webpack 会读取这个文件，解析其中依赖。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。
Chunk：代码块，用于代码合并与分割，常用在配置多入口页面使用。
Loader：模块转换器，解析拓展语言（less,TypeScript）转换成浏览器能解析语言。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果。
Output：输出结果，在 Webpack 经过一系列打包处理并得出最终代码文件。

我们可以把wepback看作成一个食品加工厂，Entry就是食品原材料，Output就是加工后的产品，
Module 就是生产的流程图，Loader就是识别原材料是什么，然后进行解析加工。Plugin就是Loader增强版可以执行Loader不能实现复杂的操作。