vue高级-webpack

╰+哭是因爲堅強的太久メ 2021-07-25 14:06 344阅读 0赞

一、市面上有哪些类似于Webpack的前端工程化工具【 自动化工具 】  
grunt  
gulp ( 4.x )  
Browserify ( Webpack 前身 )  
Webpack 【 主流行 】  
rollup.js https://www.rollupjs.com/guide/zh 【 小众 】  
parcel 【 小众 】  
FIS https://fis.baidu.com/ 【 小众 】  
二、前端工程化工具的发展历程  
grunt  
gulp ( 4.x ) 流的操作 .pipe()  
Browserify ( Webpack 前身 ) 没有兼容模块化问题（ es6 ）  
Webpack 【 主流行 】 自动解决模块依赖性问题  
AMD  
CMD  
es Module  
可以将其他类型文件做转换  
三、 Webpack版本的发展过程  
官网: https://webpack.js.org/  
中文: https://www.webpackjs.com/  
webpack1  
支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。  
loader 转化器  
webpack2  
支持ES Module，分析ESModule之间的依赖关系，  
webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking  
webpack3  
新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；  
webpack3以上基本上都可以解决es6提出的模块化  
webpack4  
可以解决es6模块化【 export default / export import 】  
更多个功能性 pulgin【 插件 】 和 loader 【 转换器 】  
前端框架中广泛使用： Angular Vue React 的脚手架都是由webpack来进行开发、管理  
学习目标：  
\- 通过webpack自主构建一个项目 【 手动构建一个项目 】  
webpack基本配置  
webpack高级配置  
四、 Webpack涉及到的前端环境问题  
Webpack底层是由 Node.js 来开发的，也就是说Webpack的配置文件都是 Node.js 文件  
Webpack的模块化书写的规范是Common.js规范  
环境支持： Node.js 8+  
前端环境： 【 重点 】  
开发环境 - 无法直接在服务器中去运行  
生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件  
测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件，放在测试环境服务器中运行  
unit test 单元测试 【 mocha Jest 】  
e2e 端到端测试  
预上线环境： 将开发环境的代码经过 打包 压缩 编译 之后的文件，放到一个局域网中去运行  
上线环境：将开发环境的代码经过 打包 压缩 编译 之后的文件，放到云服务器或是服务器主机中，可以供任何人访问，使用的一个环境（ 这个环境的上线要经过国家审核 ）  
云服务器： 类比： 宾馆 中有很多的单间，每一个云服务器就是其中一个单间  
主机： 整个酒店  
核心关注点在：  
开发环境  
生产环境  
五、Webpack的安装  
安装可以使用任何一个包管理器： npm yarn cnpm  
yarn > cnpm > npm  
举例： 我使用npm安装了一个叫做 node-sass 的包 ，但是出错了 ，这时，我们想卸载，发现卸载报错  
解决： 覆盖安装  
cnpm || yarn 进行覆盖安装  
cnpm 和 yarn 优先级没有那么绝对  
版本信息  
webpack 4.39.3  
webpack-cli 3.3.7  
1.全局安装  
$ npm install webpack webpack-cli -g  
$ cnpm install webpack webpack-cli -g  
$ yarn add webpack webpack-cli global  
2.局部安装  
$ npm install webpack webpack-cli -D  
$ cnpm install webpack webpack-cli -D  
$ yarn add webpack webpack-cli -D  
局部优先级 > 全局  
六、Webpack的概念  
webpack\* 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（ 分块束 ）  
理解：  
举例： 我们又两个模块，A模块引用B模块，我们现在使用webpack打包A模块，webpack会自动寻找A和B之间的关系，进而打包B模块  
七、Webpack 使用  
默认源代码开发目录为： src  
默认的入口文件名称为： src/index.js  
默认出口目录为： dist  
默认出口打包文件名称为： main.js  
通过mode来设置是那个环境下打包使用  
开发环境打包： 代码不经过压缩、注释不会被删除  
eval 这个方法时用来解析字符串，这个字符串里面有js代码 【 性能不太好 】  
1.终端命令行使用  
终端运行 webpack  
当我们局部安装了webpack webpack-cli后，发现运行webpack报错命名找不到  
解决： 全局安装webpack webpack-cli  
默认生成环境打包

webpack --mode development/production 开发环境/生产环境打包  
2.配置文件使用  
默认webpack配置性文件名称为 webpack.config.js，这个文件是在根目录下运行的  
运行 webpack 命令就会自动的去寻找这个 文件  
webpack.config.js文件中我们配置的就是 webpack的参数  
3.配置webpack.config.js文件  
我们接下来对这个文件进行配置，主要从以下几个方面来着手

1.  基础功能 ： 入口 出口 文件配置
2.  转换器： loader
3.  插件: plugin  
      
    单页面配置 vs 多页面配置  
    单页面配置指的只有一个入口一个出口的项目 【 推荐 】  
    多页面配置指的是有多个入口多个出口的项目  
    1.单页面配置  
    1.1 基础功能  
    /\*  
    webpack配置文件  
    也是Node.js文件  
    这个文件也是一个独立的 Common.js 模块  
    */  
      
    const path = require(‘path’)  
      
    // 1. 创建模块  
      
    const webpackConfig = \{  
    entry: ‘./src/index.js’, //网络路径（ 相对路径 ）  
    output: \{ //出口目录、文件的配置  
    path: path.join( \_\_dirname,‘dist’), // 磁盘路径  
    filename: ‘js/app.js’ // 入口文件将来打包到出口目录中的文件的路径和名称  
    \},  
    mode: ‘development’//确定是生产环境还是开发环境的打包  
    \}  
      
    // 2. 导出模块  
      
    module.exports = webpackConfig  
      
      
      
      
    1.2 问题： 验证webpack是否能自动解决模块化依赖问题 可以  
    1.3 loader 转换器 可以将其他类型文件转换为我们想要的类型文件  
    举例： 实现css的使用  
    /* \------------------------------- 转换器 ------------------------------ \*/  
    // 在webpack.config.js中做如下配置：  
    module: \{ //这里用来存放转换器的配置  
    rules: \[  
    // \{\} //每一个对象就是一个转换器的配置  
    \{//css的处理  
    test: /.css$/, // 整个项目下匹配 .css结尾的文件  
    use: \[‘style-loader’,‘css-loader’\] //两个顺序是不写反的  
    // 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】  
    \}  
    \]  
    \},  
    1.4 配置前端静态服务器  
    //需要自动刷新： webServer 搭建前端开发服务器  
    cnpm install webpack-dev-server -g | -D  
    参数:  
    命令行  
    webpack-dev-server --port 8088 --open --mode development  
      
    写到webpack.config.js配置文件:  
      
    devServer: \{//和module同级  
    port: 8088,  
    open:true  
    \}  
      
    终端运行方式2: webpack-dev-server

把运行命令放到package.json文件: devServer可以不要了  
“scripts”:\{  
“dev”: “webpack-dev-server --port 8088 --open”  
\}  
  
终端: npm run dev  
1.5 优雅降级配置  
先安装转换器需要的包  
$ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D  
配置webpack.config.js  
// 在webpack.config.js的module.rules中进行配置  
\{// 配置优雅降级  
test: /.js$/,  
exclude: /node\_modules/, // 排除node\_models中的js文件  
use: \[\{  
loader: ‘babel-loader’,  
options: \{  
presets: \[’@babel/preset-env’\]  
\}  
\}\]  
  
\}  
1.6 html产出 - 依赖的是插件  
安装插件需要的第三方包  
$ cnpm i html-webpack-plugin -D  
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

//添加一个配置项  
plugins:\[  
new HtmlWebpackPlugin(\{  
template: ‘./public/index.html’,  
filename: ‘./index.html’,//默认到output目录  
hash:true,//防止缓存,会给文件后面加入hash  
minify:\{  
removeAttributeQuotes:true//压缩 去掉引号  
\}  
\})  
\]  
1.7 css抽离 - 依赖的是插件  
将webpack编译过得css文件以 css外部引用的形式引入  
安装插件  
$ cnpm i extract-text-webpack-plugin@next -D  
  
const ExtractTextWebapckPlugin= require(“extract-text-webpack-plugin”)  
  
//loader配置：  
use: ExtractTextWebapckPlugin.extract(\{  
use: ‘css-loader’  
\}) //不再需要style-loader  
  
//pulgin配置  
new ExtractTextWebapckPlugin(‘css/\[name\]\[hash:6\].css’)  
1.8 图片打包  
yarn add url-loader file-loader --dev  
  
npm I url-loader file-loader --save-dev  
  
//url-loader 存base64 file-loader存文件（woff mp3）  
\{  
test:/.(png|jpg|gif)/,  
use:\[\{  
loader: ‘url-loader’,  
options: \{  
limit: 5000,//字节少于5000 ——》 base64 超过5000 file  
outputPath: ‘images/’, //5000意思存到images  
\}  
\}\]  
\}  
  
//css中引入 | js动态(模块化) 引入  
1.9 静态资源拷贝  
npm i copy-webpack-plugin -D  
  
const CopyWebpackPlugin = require(‘copy-webpack-plugin’)  
//plugin配置  
new CopyWebpackPlugin(\[  
\{ from: path.resolve(\_\_dirname,‘static’), to: path.resolve(\_\_dirname,‘build/static’) \}  
\])  
1.10 配置文件拆分  
“dev”: “webpack --mode development --config config/webpack.config.dev.js”,  
“build”: “webpack --mode production --config config/webpack.config.prod.js”,  
“server”: “webpack-dev-server --mode development --config config/webpack.config.dev.js”  
1.11 错误资源定制  
// 在webpack.config.js中添加如下配置项：  
devtool: ‘source-map’  
制定报错信息的源  
2.多页面配置  
2.1 基础功能  
/\*  
webpack配置文件  
也是Node.js文件  
这个文件也是一个独立的 Common.js 模块  
\*/  
  
const path = require(‘path’)  
  
// 1. 创建模块  
  
const webpackConfig = \{  
entry: \{ // 多页面配置，多个入口文件  
‘index’: ‘./src/index.js’,  
‘main’: ‘./src/main.js’  
\}, //网络路径（ 相对路径 ）  
output: \{ //出口目录、文件的配置  
path: path.join( \_\_dirname,‘dist’), // 磁盘路径  
filename: ‘js/\[name\].js’ // 入口文件将来打包到出口目录中的文件的路径和名称  
\},  
mode: ‘development’//确定是生产环境还是开发环境的打包  
\}  
  
// 2. 导出模块  
  
module.exports = webpackConfig  
  
  
  
  
解释： 为什么我们的文件要跟上hash后缀？  
目的： 就是为了创建多个版本，便于版本切换