Webpack学习笔记— 定义和基本应用

一、Webpack定义

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

webpack的重要功能包括：代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二、如何在项目中使用Webpack

1、  安装node.js，下载Node.js
官方地址：https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/

2、创建package.json

在项目的根目录文件下，创建package.json文件，在终端中输入命令npm init -y即可在项目中自动生成

3、webpack和webpack-cli的安装

在终端中输入命令npm install webpack webpack-cli --save-dev即可在项目中自动下载安装。

4、新建webpack.config.js

手动在项目根目录下新建webpack.config.js文件，找到需要打包的文件，以及打包之后输出的路径以及文件的名称。

// CommonJS语法
const path = require('path')
module.exports = {
    entry: {
        app: './src/app.js',
        admin: './src/admin.js',
        },
    output: {
        filename: '\[name].js',
        path: \_\_dirname + '/dist',
    },
};
// 写入到硬盘：./dist/app.js, ./dist/admin.js

5、package.json文件中修改scripts构建类型

在package.json文件修改构建类型为：

"scripts": {
    "build":"webpack"
  }

6、完成打包

在终端中输入打包命令，即可在打包完成，可以在打包后输出路径查看自己打包文件，后面直接引用打包后路径的文件即可。

npm run build