Vue2.0学习（一）前端工程化与webpack

一、前端工程化

企业级开发中，把前端开发需要的工具、技术、流程、经验进行规范化、标准化。

二、webpack

前端项目工程化的具体解决方案。

1.主要功能

提供友好的前端开发支持，以及代码压缩混淆、处理浏览器端JS的兼容性、性能优化等。（浏览器自动转化代码，使在低版本高版本浏览器中都能运行）

2.创建初始项目注意事项

1）.新建项目空白目录（目录中不能有中文），并运行（在项目根目录打开命令行） npm init –y 命令，初始化包管理配置文件 （生成）package.json。
2）.运行 npm install jquery –S 命令，安装 jQuery（是小写的jquery，大写的版本很低，后面npm会报错）
（3.通过 ES6 模块化的方式导入 jQuery：

import $ from "jQuery";

3.安装和配置webpack

1）.安装：在终端运行安装webpack的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

2）.配置
（1）在项目**根目录（不是src目录！）**中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
    mode: 'development' //构建模式：development、production
};

mode代表webpack运行的模式，开发时一定要用development，打包速度比较快，发布上线时一定要用production，因为上线追求的是体积小
（2） 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
        "dev": "webpack"
    }

（3）终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建：
运行成功如图：

运行后会自动生成一个dist文件，里面有个main.js文件，引入这个文件代替原来报错的js文件就可以解决原来js产生的兼容性问题。

4.webpack的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js，会被优先处理
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定：
1）修改打包入口：通过 entry 节点指定打包的入口

2）修改打包出口：通过 output 节点指定打包的出口

// 导入path
const path = require('path');

module.exports = {
    entry: path.join(__dirname, './src/index1.js'),
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //生成的文件名
    },
    mode: 'development' //构建模式：development、production
};

__dirname为当前文件目录，即项目根目录（webpack.config.js 的目录），拼接目标js目录。

5.webpack插件

1）webpack-dev-server:设置保存代码时自动npm run dev
(1)安装：

npm install webpack-dev-server@3.11.2 -D

(2)配置webpack-dev-server，让插件实行实施打包功能
① 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {
        "dev": "webpack serve"//增加“ serve”
    }

② 再次运行 npm run dev 命令，重新进行项目的打包
如果报错：[webpack-cli] Unable to load ‘@webpack-cli/serve’ command，执行：

npm install webpack-cli --save-dev

参考博客，
再执行npm run dev：

③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
④需要重新加载js，插件把js保存到内存中而不是原来的dist文件夹中，所以需要重新引入内存中的js

<!--加载内存中bundle.js -->
    <script src="/bundle.js"></script>

只能用http://localhost:8080/src访问打开index.html，否则会报错。

2）html-webpack-plugin，对html进行操作，复制文件到指定位置
(1)安装：

npm install html-webpack-plugin@5.3.2 -D

（2）配置

//①导入HTML插件
const htmlPlugin = require('html-webpack-plugin');
//②创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', //指定文件路径
    filename: './index.html' //指定生成路径
});
module.exports = {
    mode: 'development', //构建模式：development、production
    //③通过plugins节点使htmlPl插件生效
    plugins: [htmlPlugin]
};

这个插件生成页面的同时也会自动引入打包的bundle.js文件,被复制的页面不用再引入打包的js文件.如果运行npm run dev报错，可以尝试执行npm install jquery –S 重新安装jQuery，再执行启动服务器。

3）devSever节点：在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置

//初次打包后自动打开浏览器
    devServer: {
        open: true,
        //自定义打开端口，http协议中端口80可以被省略
        port:80,
        //指定打开运行的主机地址
        host:'127.0.0.1',

4）加载器loader：webpack只能处理**.js文件**，loader可以帮忙处理非js文件
（1）处理CSS文件：把css文件用Es6引入入口文件中做模块化处理，需要解决处理非js文件问题，用css-loader加载处理CSS文件。
①安装

npm i style-loader@3.0.0 css-loader@5.2.6 -D

②在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }

重新启动dev，得到正确运行结果。
（2）处理less文件（可以嵌套写样式）：less-loader
①安装：

npm i less-loader@10.0.1 less@4.1.1 -D

②配置

module: {
        rules: [
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }

5）打包处理样式中与URL路径相关的的文件：
性能优化，把图片（小图片）转为base64字符串，避免引起不必要的网络请求。
① 安装文件包：运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

    module: {
        rules: [
            //css对应模块
            //limit指定图片最大的大小，只有小于limit才能被转为base64格式的图片，用?拼接
           { test: /\.jpg|png|gif$/, use: 'url-loader' },

        ]
    }

6）打包处理 js 文件中的高级语法：
webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借
助于 babel-loader 进行打包处理。
①运行如下的命令安装对应的依赖包：

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

②在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },

exclude:排除第三方包中的js文件，以免第三方包被错误处理失效。
③配置 babel-loader
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports = {
    plugins: [
        ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
}

详情请参考 Babel 的官网

6.打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

"scripts": {
        "dev": "webpack serve",
        "build": "webpack --mode production"
    }

然后执行npm run build,发布成功会在根目录新增一个dist文件夹。
–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项
优化：可以在出口文件上增加目录对打包后的文件进行分类
①filename: 'js/bundle.js'
②在url-loader的配置时增加文件目录：?后面有多个参数是用&添加

{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=60000&outputPath=img' }

试了一下，这个地方得写limit参数才能添加文件目录。
③每次发布自动删除旧的dist文件:安装插件clean-webpack-plugin
安装：npm install --save-dev clean-webpack-plugin
配置：

//导入HTML插件
const HtmlPlugin = require('html-webpack-plugin');
//导入CleanWebpackPlugin构造函数
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


//然后再plugins数组中加入
plugins: [htmlPlugin, new CleanWebpackPlugin()],

7.source map

一个存储位置信息（源代码和打包文件对于行号）的文件。
问题：源代码经打包压缩后行号会发生改变，造成代码报错时难以精准定位到错误位置。
有了source map，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试
方法：在module中增加devtool: 'eval-source-map'（开发调试阶段都这样设置方便调试，发布后关闭比较安全）
如果只定位不暴露源码：设置devtool:'nosources-source-map'
既定位也看源码（非常不安全！！！）：devtool:'source-map'

8.其实这些都不用自己配，vue可以直接引入创建。

@可以表示 目录
配置webpack.config.js文件，在module.exports中新增：

resolve:{
        alias:{
            '@':path.join(__dirname,'./src/')
        }
    }

就将@设置成src这层目录了，若想使用src/js，可以直接写@/js

三、安装vue插件

把插件拖动到扩展程序页就行，要打开Chrome右上角开发者模式，安装后关闭开发者模式。然后打开插件详情->允许访问文件目录。