Vue 一套构建用户界面的渐进式的框架 （Webpack篇~）

友情提示：

大部分loader可以在webpack官网中找到，并且学习对应的用法或直接copy配置。

参考webpack中文网址：https://www.webpackjs.com/

概述

是一个现代化的JavaScript应用的静态模块打包工具

webpack其中一个核心就是让我们能进行模块化开发，并且会帮助我们处理模块间的依赖关系（处理好生成浏览器能识别的内部代码，更好的高效让浏览器识别）

像使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6
（浏览器对这些规范有的不支持，但用webpack打包后，便可以让浏览器更好的支持）


webpack将各种资源模块进行打包合并成一个或多个包

并且在打包过程中，还可以对资源进行处理，如压缩图片，将scss转为css，将ES6语法转化为ES5语法，将TypeScript转成JavaScript等等操作。


webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他的附带功能。


webpack为了可以正常运行，必须使用node环境

准备工作

用npm全局安装webpack（3.6.0版本）

npm install webpack@3.6.0 -g

npm install webpack3.6.0 --save-dev



创建文件夹

dist 文件夹 ： 用于存放之后打包的文件
src  文件夹 ： 用于存放我们写的源文件


例如：

1、在dist 文件夹下创建个bundle.js文件（用来存储打包后的文件），
然后再 src 文件夹下面创建个main.js文件（主文件）和test.js（测试文件）和index.html（页面展示文件）。

2、再test.js 定义几个变量，任用一个模块化规模导出，再去main.js文件夹中导入并打印。

3、在指令面板上 ： webpack ./src/main.js  ./dist/bundle.js

这样就把main.js 文件打包到bundle.js文件中（只需要打包一个main.js文件就可以，因为webpack能自动处理各种依赖包，把对应联系的模块文件全部打包）

4、将打包好的 bundle.js 文件 script src 到index.html ，最终在页面上可以看到控制台打印效果

基本使用

1、运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包

2、在项目根目录中，创建名为 webpack.config.js 的 webpack配置文件

3、在 webpack 的配置文件中，初始化如下基本配置:

module.exports ={
	mode : 'development' // mode用来指定构建模式
}


4、 在 package.json 配置文件中的 scripts 节点下，新增dev脚本如下:

"scripts" : {
	"dev" : "webpack" // script节点下的脚本，可以通过 npm run 执行
}


5、在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

配置打包入口和出口

也可以配置webpack文件，这样就 直接使用 webpack 命令就可以自动打包。

1、创建webpack.config.js 文件


2、配置文件

const path = require('path') //导入node.js 中专门操作路径的模块

module.exports = {
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    }
}

自动打包功能

1、运行 npm install webpack-dev-server -D  （安装支持项目的打包工具）

2、修改 package.json 文件

'scripts' : {
    // 可通过 npm run dev
    "dev" : "webpack-dev-server"
}

3、在index.html文件中，通过script 引入 bundle.js文件

4、npm run dev


到这一步可能会报错，可能是 webpack 与 webpack-dev-server 的版本不兼容所导致的，需要在 package.json 文件中配置以下信息

"webpack": "^5.3.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

node_modules 和 package-lock.json 删除，然后运行 npm install

即可正常运行 npm run dev


------------------------------------------------------------
或也可以去 node_modules 中找到 webpack-dev-server 目录 下面bin目录中的webpack-dev-server.js文件，搜索webpack-cli@   
查看对应的版本号




5、浏览器中访问 http://localhost:8080，查看自动打包效果

plugin

运行项目打开服务器地址会发现首页并不是直接显示inde.html页面内容，而是显示的文件夹，所以需要用plugin来个预处理渲染页面


1、运行 npm install html-webpack-plugin -D 安装生成预览页面的插件

2、修改 webpackconfig.js 文件 ，添加配置

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
    // 创建插件的实例对象
    template : './src/index.html'  // 指定要用到的模板文件
    filename : 'index.html'  // 指定生成的文件名称，该文件存与内存中，在目录中不显示
    
})

3、修改 webpack.config.js 文件向外暴露的配置对象，新增如下配置节点：

module.exports = {
    plugins : [htmlPlugin]  // plugins 数组是 webpack打包期间用到的一些插件列表
}

配置自动打包相关参数

在package.json文件中配置
这样项目运行后自动打开浏览器跳转网址

// --open 打包完成后自动打开浏览器页面
// --host 配置工P地址
// --port 配置端口
"scripts" : {
	"dev" : "webpack-dev-server --open --host 127.0.0.1 --port 8888"
},

loader

在之前主要是用webpack来处理写的js代码，并且webpack会自动处理js之间的依赖。

但在开发中不仅有基本的js代码处理，还需要加装css，图片，也包括一些高级的将ES6转为ES5代码，将TypeScript代码转为ES5代码，将scss、less转成css，将.jsx、.vue文件转为js文件等，对于webpack本身能力来说，对于这些转化是不支持的。

webpack扩展对应的loader便可以


loader使用过程：

1、通过npm安装使用的loader （可以去webpack官网，有对应需要的loader和对应的详细安装）

2、在webpack.config.js中的modules关键字下进行配置


' 大部分loader可以在webpack官网中找到，并且学习对应的用法。'


'参考webpack中文网址：https://www.webpackjs.com/'

loader 调用过程如下：

'以下配置各种打包类型内容，可跳过，可以去webpack官网中寻找配置'

'参考webpack中文网址：https://www.webpackjs.com/'

打包css文件

1、运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader

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

//所有第三方文件模块的匹配规则
module: {
    rules: [
    	{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
}


其中, test 表示匹配的文件类型，use 表示对应要调用的 loader

打包less文件

1、运行 npm i less-loader less -D 命令

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

//所有第三方文件模块的匹配规则
module: {
    rules: [
    	{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader/'] }
    ]
}

打包scss文件

1、 运行 npm i sass-loader node-sass -D 命令

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

//所有第三方文件模块的匹配规则
module: {
    rules: [
        { test: /\.scss$/,use: ['style-loader','css-loader','sass-loader'] }
    ] 
}

配置postCSS自动添加css的兼容前缀

1、 运行 npm i postcss-loader autoprefixer -D 命令

2、 在项目根目录中创建 postcss 的配置文件 postcss.config.js ，并初始化如下配置;

const autoprefixer = require ('autoprefixer') // 导入自动添加前缀的插件

module.exports = {
	plugins: [ autoprefixer ] //挂载插件

    
3、在 webpack.config.js 的module -> rules 数组中，修改css的 loader规则如下:

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

打包图片和文件

①1、运行 npm i url-loader file-loader -D 命令

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

module: {
    rules: [
    	{
            test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/ ,
        	use: 'url-loader?limit=16940'
        }
    ]
}


其中 ? 之后的是 loader 的参数项。

limit 用来指定图片的大小，单位是字节（byte），只要小余 limit 大小的图片，才会被转为 base64 图片

打包 js 文件中的高级语法

1、安装babel 转换器相关的包: npm i babel-loader @babel/core @babel/runtime -D

2、安装babel语法插件相关的包: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3、 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下:

module.exports = {
    presets: [ "@babel/preset-env" ],
    plugins: [ '@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties' ]
}


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

// exclude 为排除项，表示 babel-loader不需要处理 node_modules 中的 js 文件
{ test: /\.js$/, use: "babel-loader",exclude: /node_modules/ }

配合Vue

1、npm 安装好Vue

2、进行webpack打包

3、若页面控制台出现错误，可能是版本的原因，如下：

runtime-only（代码中不可以有template）
runtime-compiler（代码中，可以有template，因为有compiler可以用与编译template）


这样需要去webpack配置文件中配置（配置内容可以去Vue官网查找webpack的预编译模板）

补充知识

在vue 中 ，Vue 创建的实例中，添加template属性，会默认替换掉 el。


可以这样说，例如：

1、在index.html文件中：

<div class='app' > </div>

2、在app.js文件中：

let temp =`
  	<div>
		<h2>要显示的内容</h2>
	</div>
`

const app = new Vue({
    el : '.app' ,
    template : temp
})

export app


这样的好处是模板也分离出来。

Vue 单文件组件

传统组件的问题和解决方案

一、问题

1. 全局定义的组件必须保证组件的名称不重复
2. 字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的 \
3. 不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏
4. 没有构建步骤限制，只能使用HTML和ES5 JavaScript,而不能使用预处理器(如:Babel)

二、解决方案

针对传统组件的问题，Vue提供了一个解决方案 ，使用 Vue 单文件组件。
也就是.vue 文件

若使用vscode，推荐安装 Vetur 插件 

Vetur插件的特性: 语法高亮, 代码片段 质量提示&错误、格式化/风格、智能提示等。

单文件组件的组成结构

• template组件的模板区域

• script业务逻辑区域

• style样式区域

<template>
	<!--这里用于定义vue组件的模板内容-->
</template>

<script>
    // 这里用于定义vue组件的业务逻辑
    export default {
    	data(){ return {} },//私有数据
        methods: {} // 处理函数
    	// ...其它业务逻辑
    }
</script>

<style scoped>
	/* 这里用于定义组件的样式 */
</style>

webpack 中配置 vue 组件的加载器

1、 运行 `npm i vue-loader vue-template-compiler -D` 命令

2、 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下:


const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	module: {
		rules: [
			// ..．其它规则
			{ test: /\.vue$/ , loader: 'vue-loader'}
        ]
	},
	plugins: [
		// ..．其它插件
    	new VueLoaderPlugin() //请确保引入这个插件!
    ]
}

在 webpack 项目中使用 vue

1、 运行 `npm i vue -S` 安装 vue

2、 在src -> index.js 入口文件中，通过 `import Vue from 'vue'` 来导入 vue 构造函数

3、 创建 vue 的实例对象，并指定要控制的el区域

4、 通过 render 函数渲染 App 根组件



// 1．导入vue构造函数
import Vue from 'vue'
// 2．导入App根组件
import App from './components/App.vue'
const vm = new Vue({
	// 3．指定vm实例要控制的页面区域
    el: "#app",
	// 4．通过render函数,把指定的组件渲染到 el 区域中
    render: h => h(App)
})

webpack 打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过 package.json 文件配置打包命令 ：

// 在package.json 文件中配置webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件

"script" : {
    // 用于打包的命令
    
   "build" : "webpack -p"
    
    // 用于开发调试的命令
    "dev" : "webpack-dev-server --open --host 127.0.0.1 --port 3000"
}