Webpack

1.什么是Webpack

webpack是一个前端构建工具。

前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说，开发环境的代码是为了更好的阅读，而运行环境的代码则是为了能够更快地执行。因此开发环境和运行环境的代码形式也不相同。比如，开发环境的代码，要通过混淆压缩后才能放在线上运行，这样代码体积更小，而且对代码执行也不会有任何影响。

2.Webpack使用场景

①代码压缩

将JS、CSS代码混淆压缩，让代码体积更小，加载更快

②编译语法

编写CSS时使用Less、Sass，编写JS时使用ES6、TypeScript等，这些标准目前都无法被浏览器兼容，因此需要构建工具编译，例如使用Babel编译ES6语法。

③处理模块化

CSS和JS的模块化语法，目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法，但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。

 vue、react、angular 都可以通过webpack构建

全部可供访问的页面数量不超过500个

3.Webpack安装配置

webpack官网：https://webpack.docschina.org/

0.先安装node.js(windows版本)

下载 | Node.jsNode.js安装详细步骤教程(Windows版) - 码探长 - 博客园下载 | Node.js

Node.js 就是运行在服务端的 JavaScript

Node.js 官方网站下载：Download | Node.js 下载安装包.msi

双击打开安装，下一步下一步即可（安装路径为“E:\Program Files\nodejs”）：

安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号，如下图所示：npm随安装程序自动安装，作用就是对Node.js依赖的包进行管理

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：

然后在cmd命令下执行如下两个命令：

npm config set prefix "E:\Program Files\nodejs\node_global"

npm config set cace "E:\Program Files\nodejs\node_cache"

配置环境变量

环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”，值为“E:\Program Files\nodejs\node_global\node_modules”

环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“E:\Program Files\nodejs\node_global”

到此配置完成。、

在cmd命令下执行  npm install webpack webpack-cli –g  安装全局webpack，如下图所示

注意这里的命令要管理员身份，不然报错没有权限

 安装成功，自定义文件夹如下所示

 

 在cmd命令下执行 webpack -v 查看webpack版本

本地安装webpack

D:                 //切换到D盘
cd D:\TestWebpack //切换到项目目录

 输入如下命令，在项目目录中安装webpack，其中，--save-dev是本地安装

npm install webpack webpack-cli --save-dev

输入如下命令，若出现版本号，说明安装成功

输入如下命令，将在项目目录中自动生成package.json文件

npm init -y

配置打包目录

在项目目录下，新建config文件夹，用于存放配置文件；src文件夹，用于存放源码；out文件夹，用于存放打包生成文件，具体如下图所示

 添加webpack.config.js文件

在config文件夹中添加webpack.config.js文件，并添加如下代码：

const path=require('path'); //调用node.js中的路径
module.exports={
    entry:{
        index:'./src/js/index.js' //需要打包的文件
    },
    output:{
        filename:'[name].js',    //输入的文件名是什么，生成的文件名也是什么
        path:path.resolve(__dirname,'../out') //指定生成的文件目录
    },
    mode:"development"    //开发模式，没有对js等文件压缩，默认生成的是压缩文件
}

运行webpack

在cmd命令窗体中，输入如下命令，运行成功后，在out目录中会生成打包后的index.js

 配置package.json

每次输入命令webpack --config config/webpack.config.js，太长，且非常不方便，此时我们可以在package.json文件中配置，如下所示：

"start": "webpack --config config/webpack.config.js"

 配置完成后，输入如下命令，可以直接打包

npm run start

JS缓存问题的处理

通过哈希值解决JS缓存问题(在没有修改JS要打包的内容时，不会重新打包一个JS文件)，修改webpack.config.js文件，具体代码如下：

安装webpack插件clean-webpack-plugin

通过clean-webpack-plugin插件删除输出目中之前旧的文件。

安装命令

npm install --save-dev clean-webpack-plugin

方式一

const path=require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development",
    plugins:[
        new CleanWebpackPlugin()        
    ]
}

方式二

const path=require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin ;
module.exports={
    entry:{
        index:'./src/js/index.js'
    },
    output:{
        filename:'[name].[chunkhash:8].js',
        path:path.resolve(__dirname,'../out')
    },
    mode:"development"
  
}

配置完后，我们再次运行npm run start，此时out目录中，只有一个新生成的js文件

webpack安装、配置、打包结束。

1..打开vscode,新建文件夹

2.打开Vscode终端，npm初始化

npm init

 报错是没有安装node.js

3.安装webpack

npm i webpack webpack-cli --save-dev

 命令说明：

 也可以使用Yarn安装

 为什么要设置-D参数呢

 项目开发完毕可能会上传到网络(例如github)，也有可能给朋友分享，无论哪种方式我们代码分享出去是不带node_modules目录的，所以我只需要拿到package.json安装依赖就行。

4.webpack的使用

简单案例

在根目录下创建src文件夹，并在src下创建两个js文件，其中一个是入口文件app.js，一个是写内容的work.js。入口文件用来引入真正写页面的JS文件、CSS文件。

work.js内容：document.write('哈哈哈哈哈')

app.js内容：let dt = require('./work.js')  引入work.js内容

然后，再返回上一层目录，新建index.html文件（该文件和src属于同一层级），内容是：

在命令行中执行：webpack app.js 进行打包，自动生成./dist/main.js文件，将

配置打包模式

配置入口和出口文件

编译模板页面

实时打包

运行css文件

5.webpack的loader

什么是loader

安装配置css相关loader

引入背景图片应用

安装配置图片相关loader

应用less文件

安装配置less相关loader

运行es6标准代码

babel-loader和preset和plugin关键字解读

安装配置loader和preset做降低处理