webpack4.0搭建vue教程

Posted 2021-01-28 cyrus-br

webpack4.0 的使用

参考链接

1.创建目录结构

没有安装记得先安装webpack npm install webpack webpack-cli -D

2.使用 npm init -y 来生成配置是文件 package.json

3.1 使用命令打包 npx webpack ./src/main.js --output-filename bundle.js --output-path ./dist/ --mode development

• 老版本的打包方案是： webpack .srcmain.js .distundle.js
• 而在webpack4之后 官方对 webpack-cli 单独抽离了出来
• 所以打包语句就变了 npx webpack a.js --output-filename b.js --output-path . --mode development

• mode 表示生产还是开发模式

  3.2 使用配置文件

• 添加 mode: ‘production‘ 在webpack.config.js 中(如果没有这个文件就自己创建一下了)

4 webpack 自动打包配置

• 在根目录下新建文件 webpack.config.js

  在 webpack.config.js 文件中新建配置项

• 参考链接

module.exports = {
// 打包文件入口 entry
// 1. 单一条目语法可以简写
// 2. 传递数组(将多个依赖文件一起注入并将其依赖关系映射到一个“块”)
// 3. 对象(“可扩展的webpack配置”是可以重用并与其他部分配置组合的配置)
entry: path.join(__dirname,‘./src/main.js‘), 
output:{// 输出文件相关配置
path: path.join(__dirname,‘./dist‘),
filename:‘bundle.js‘
},
mode: ‘production‘ // 环境
} 

根据入口文件,生成多个js文件
下面实例 可以生成 app.bundle.js 和 print.bundle.js 文件

entry: {
app: ‘./src/index.js‘,
print: ‘./src/print.js‘
},
output: {
filename: ‘[name].bundle.js‘,
path: path.resolve(__dirname, ‘dist‘)
}

webpack 的作用

1. webpack 处理 js 文件间的相互依赖关系

2. webpack 处理 js 的兼容性问题，将高级语法，浏览器不识别的语法的规则转换为 低级的浏览器识别的语法规则

webpack 执行过程

当我们在控制台运行 webpack 命令执行时， webpack 做了下面过程

1. 首先 webpack 命令 没有指定 入口、出口以及模式
2. webpack 就会在跟目录 查找 webpack.config.js 配置文件
3. 当找到配置文件， webpack 会解析这个配置文件. 然后就得到了配置文件中的配置对象
4. 当 webpack 拿到了配置对象后，就知道了入口文件、出口文件、模式了。

使用 htmlWebpackPlugin 生成首页

如果我们更改了其中一个入口点的名称，或者甚至添加了新入口点，生成的包将在构建时重命名，但我们的index.html文件仍将引用旧名称。所以可以利用工具生成一个页面来引入这些文件

1.安装 npm install --save-dev html-webpack-plugin

在 webpack.config.js 文件中添加配置项

先导入插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

plugins: [
new HtmlWebpackPlugin({
template:"./src/index.html", // 根据 目标文件生成 html
title: ‘Output Management‘
})
]

管理 /dist 文件夹

Webpack将生成文件并将它们放在/dist文件夹中，但它不会跟踪项目实际使用的文件。
通常，最好/dist在每次构建之前清理文件夹，以便仅生成使用过的文件。

1.打包之前，手动删除

2.使用工具 clean-webpack-plugin

1. 安装插件 npm install --save-dev clean-webpack-plugin
2. 配置 webpack.config.js 文件

const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
plugins: [
new CleanWebpackPlugin([‘dist‘]),
],

使用 source maps

当使用 webpack 打包源码时，很难跟踪错误和警告到其原始位置。例如:
将三个源文件（a.js，b.js和c.js）捆绑到一个bundle（bundle.js）中,
如果其中一个源文件出现错误，则堆栈跟踪将简单地指向bundle.js。

使用 inline-source-map 来追踪源错误

给 webpack.config.js 配置文件 新增
devtool: ‘inline-source-map‘

webpack 自动编译工具

在上面,我们已经习惯了

1. webpack 命令 打包
2. 或者 在package.json中配置
   (如果存在scripts添加就好了)

"scripts": {
"start": "webpack"
}

使用 npm run start 来进行打包
但每次都要打包显得有麻烦，我们可以自动编译代码

1，使用watch model

让我们添加一个npm脚本，它将启动webpack的Watch Mode：
在 package.json 配置文件中新增

"scripts": {
"watch": "webpack --watch",
}

之后执行 npm run watch 它不会退出命令行， 当你重新编译文件后，他就会自动打包了

2.使用webpack-dev-server （推介使用）

1. 在安裝 webpack-dev-server 之前确保安装 webpack 和 webpack-cli (全局安装不行)npm install webpack webpack-cli -D
2. 注意 webpack-dev-server 生成的 bundle.js 文件是托管到内存上的，并不会写到物理磁盘上的。生成的 bundle.js 默认是在根路径下的

webpack-dev-server 提供了一个简单的Web服务器和使用实时重新加载的能力

2.1 安装 webpack-dev-server

使用命令 npm install webpack-dev-server 来进行安装webpack-dev-server

2.2.1 修改配置文件 webpack.config.js

devServer: { // 配置 服务器 信息 
contentBase: ‘./dist‘, // 托管的目录
port: 3000, // 指定端口号
open: true, // 自动打开浏览器
},

2.2.2 也可以使用来命令行来指定服务器信息

"start": "webpack-dev-server --open --contentBase dist --port 3000"

2.3 在 package.json 添加脚本来运行服务器

"scripts": {
"start": "webpack-dev-server --open",
},

2.4 使用 npm start 命令来运行。

此时浏览器自动加载页面。如果更改任何源文件并保存它们，则在编译代码后，Web服务器将自动重新加载

2.5.1 使用配置热更新

它允许在运行时更新所有类型的模块，而无需完全刷新。（类似于tomcat服务器的debug模式）

• 修改 webpack.config.js 文件

1. 引入
   const webpack = require(‘webpack‘);

devServer: {
contentBase: ‘./dist‘,
hot: true
},

plugins: [
new webpack.HotModuleReplacementPlugin()
s]

2.5.2 使用命令行配置

"start": "webpack-dev-server --hot"

3. 使用 webpack-dev-middleware

他就是启动了一个服务器，将结果放到服务器上去
webpack-dev-middleware 是一个包装器，它将webpack处理的文件发送到服务器

3.1 安装express，webpack-dev-middleware

因为 webpack-dev-middleware 依赖于 express框架
使用 npm install --save-dev express webpack-dev-middleware 命令

3.2 修改 webpack.config.js 配置文件 保证中间件能够运行

output: {
publicPath: ‘/‘
}

publicPath运行在服务器中 提供文件http://localhost:3000

3.3 设置自定义express服务器

1. 在根目录新建 server.js 文件

const express = require(‘express‘);
const webpack = require(‘webpack‘);
const webpackDevMiddleware = require(‘webpack-dev-middleware‘);

const app = express();
const config = require(‘./webpack.config.js‘);
const compiler = webpack(config);

// 告诉 express 使用 webpack-dev-middleware 和 webpack.config.js
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));

// 服务器启动端口
app.listen(3000, function () {
console.log(‘请访问： http://127.0.0.1:3000
‘);
});

添加运行 服务器脚本

在package.json文件中新增：

"scripts": {
"server": "node server.js",
}

运行 npm run server 就可以了

资产管理(管理css 图片 字体 数据)

加载样式 以css为例

1. 安装和添加 风格装载机 和 CSS-装载
   使用 npm install --save-dev style-loader css-loader
2. webpack.config.js 文件中添加

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

加载less文件，使用 less-loader 不过 less-loader 依赖 less 所以安装两个包

配置文件：

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

加载 sass 文件，使用 sass-loader 就可以了。node-sass

配置文件:

rules: [{
test: /.scss$/,
use: [‘style-loader‘, ‘css-loader‘,‘sass-loader‘]
}]

webpack使用正则表达式来确定它应该查找哪些文件并将其提供给特定的加载器。在这种情况下，任何以...结尾的文件.css都将被提供给style-loader和css-loader。

加载图片

使用 url加载器 或 文件加载器

file-loader 和 url-loader 的关系:
简单说url-loader封装了file-loader，但url-loader不依赖于file-loader。
url的工作情况分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL(base64码)
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给>file-loader。因此我们只需要安装url-loader即可

1. npm install --save-dev url-loader
2. webpack.config.js 配置文件新增图片匹配规则

module: {
rules: [
{
test: /.(png|svg|jpg|gif)$/,
use: [‘url-loader‘]
}
]
},

加载字体

文件和URL加载器将获取你通过它们加载的任何文件，并将其输出到构建目录。这意味着我们可以将它们用于任何类型的文件，包括字体

1. 如果图片安装文件加载器 就需要在安装了直接 配置 npm install --save-dev file-loader
2. webpack.config.js 配置文件新增字体匹配规则

module: {
rules: [
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [‘url-loader‘]
}
]
},

加载自定义数据（一般用于测试，自定义构建数据）

1. npm install --save-dev csv-loader xml-loader
2. 配webpack.config.js 配置文件新增数据类型文件匹配规则

{
test: /.(csv|tsv)$/,
use: [
‘csv-loader‘
]
},
{
test: /.xml$/,
use: [
‘xml-loader‘
]
}

这样就可以import将这四种类型的数据中的任何一种（JSON，CSV，TSV，XML）导入使用了

Babel 转换ES语法

加载 Babel 包，用来将 webpack 处理不的 ES6或ES7 语法 转换为 低级语法

1. npm install babel-core babel-loader babel-preset-env -D
2. webpack.config.js 添加处理规则

// 使用babel-loader在webpack打包时处理js文件
{
test: /.js$/,
loader: ‘babel-loader‘,
include: [path.resolve(__dirname, ‘src‘)] // src目录下的js文件
}

1. babel 配置

在项目根目录下新建 .babelrc 文件

{
"presets": ["env"]
}

如果想要使用 草案阶段ES 的语法规则 记得就是用下面的转换规则和配置了

1. 添加es7草案阶段的提案stage-2

• 4.1 安装 npm i babel-preset-stage-2 -D
• 4.2 修改 .babelrc 配置文件

{
"presets": [
["env", {
"targets": {
"browsers": ["> 1%", "last 2versions", "not ie <= 8"]
}
}],
"stage-2"
]
}

以上配置表示使用babel-preset-env编译js，且浏览器环境为：
1、全球市场份额大于1%的浏览器
2、最后2个版本的浏览器
3、大于IE8版本的IE浏览器
然后再使用babel-preset-stage-2插件编译尚处在草案阶段的语法

babel-preset-loader、babel-preset-env、babel-preset-core这3个插件就能满足使用webpack打包js文件时先通过babel编译js为es5的代码
babel-preset-stage-2插件可以处理草案阶段的ECMASCRIPT语法
- - - - - - -

webpack4.x之前的处理。。之后也可以这样使用

1. npm install --save-dev babel-core babel-loader babel-plugin-transform-runtime
npm install --save-dev babel-preset-env babel-preset-stage-0
2. webpack.config.js 添加处理规则、

{
test: /.js$/,
use: [
‘babel-loader‘
],
exclude:/node_modules/ // 不处理这个包下的文件
}

1. 在根目录创建 .babelrc 的 Babel 的配置文件。这个配置文件是json格式。
   {
   "presets":["env","stage-0"],
   "plugins":["transform-runtime"]
   }

Babel 配置文件补充（建议使用第一种）

• Babel的配置文件是 .babelrc，存放在项目的根目录下.
• 该文件用来设置转码规则和插件，基本格式如下：

{
"presets": [],
"plugins": []
}

• 或者 在 package.json 使用

"babel":{
"presets": [], // 配置语法规则
"plugins": [] // 配置插件
}

此时你应该明白他们之间的关系了。 所以 .babelrc 是遵循json语法格式的

presets: 表示转码规则
建议安装 npm install babel-presets-env -D
注意：在使用ES7语法规则时候就要添加

babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
babel-preset-stage-4
中的一个就可以了。 使用方法见上面

plugins：转码插件

npm 安装时，可能会有一个 baabel-core 和 babel-loader 不匹配的现象。
此时，根据提示 更换 baabel-core 或者 babel-loader 版本即可了。

使用 VUE

安装vue

1. npm install vue -S
2. 安装 .vue模板文件 的加载器
3. npm install vue-loader vue-template-compiler -D
4. webpack.config.js 文件 新增

const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
plugins: [ // 配置插件的节点
new VueLoaderPlugin(),
],
{
test:/.vue$/,
use:[‘vue-loader‘]
}

1. 使用 render 函数 来渲染组件。

render:c=>c(组件名称)

使用 import Vue from ‘vue‘ 导入的和script 引入的并不一样。

其实这个并不常用。。也不需要配置

1. 在 webpack.config.js 文件中配置

resolve:{
alias:{
"vue$": "vue/dist/vue.js"
}
}

1. 使用 import Vue from ‘../node_modules/vue/dist/vue.js‘

使用 min-ui 组件

安装 min-ui

npm install mint-ui -D

使用 mint-ui

1. 引入全部组件

import Mint from ‘mint-ui‘;
Vue.use(Mint);
import ‘mint-ui/lib/style.css‘; 

1. 按需要导入

import { Header } from ‘mint-ui‘;
import ‘mint-ui/lib/header/style.css‘;
Vue.component(Header.name, Header);

这时候就会发现需要单独导入css文件，有些繁琐

使用 babel-plugin-component 插件自动导入样式

1. 安装 npm install babel-plugin-component -D
2. .babelrc 配置

"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]

可能编译器会有一些提示。不要在意就好了

使用 vue-router 路由组件

1. npm install vue-router -D 下载路由
2. 导入路由模块, 并且注册路由

import VueRouter from ‘vue-router‘
Vue.use(VueRouter);

1. 创建路由对象

var router = new VueRouter({
routes:[ // 路由匹配规则
{ path:‘/home‘, component: HomeContainer},
]
})

1. 将路由挂载到实例对象上

var vm = new Vue({
el:"#app",
router, // 挂载 路由
});

当然可以把路由模块抽离出去，封装起来 (建议这样做)

获取远程数据 (注意跨域问题)

使用 vue-resource

1. 安装 npm i vue-resourse -D
2. 导入 vue-resourse 并全局注册

import VueResourse from ‘vue-resourse‘
Vue.use(VueResourse);

1. 使用 下面方式去获取数据， 注意返回的是一个 promise 对象。
   get:

this.$http.get("url").then(function(result){
// auto
});

post:

使用 http 库 Axios

Axios 是一个基于 promise 的 HTTP 库

1. 安装 npm install axios vue-axios -D
2. 然后引用并使用模块

import Axios from ‘axios‘
import VueAxios from ‘vue-axios‘
Vue.use(VueAxios,Axios)

1. 在模块内的使用方式
   this.$httpmethod
2. 使用实例

• 4.1 get：

axios.get(‘url‘).then(function(response){})
axios.get(‘url‘,{
params:{
id:12345,
　　 name:‘ay‘
}
}).then((response)=>{
console.log(response)
})
axios.get(‘url?id=12345&name=ay‘).then(function(response){})

• 4.2 post:

axios.post(‘index.php‘,{
id:12345,
name:‘ay‘
}).then((response)=>{
console.log(response)
})

• 4.3 并发请求

function getUrl1() {
return axios.get(‘url1‘);
}
function getUrl2() {
return axios.get(‘url2‘);
}
axios.all([getUrl1(), getUrl2()])
.then(axios.spread(function (acct, perms) {
// acct为第一个请求的结果，perms为第二个请求的结果
}));

• 4.4 还可以做Ajax的交互请求

Axios 拥有的特性

可以从浏览器中创建XHR对象
(异步)
可以从nodeJS中创建HTTP请求

支持Promise API
(异步，链式编程)
可以拦截请求和响应 (关键点， 可以做切面编程)

可以转换请求数

可以取消请求

可以自动转换JSON数据
(移动端)
客户端支持防御XSRF

ui

mock 自动成测试数据的一个框架

mock官方文档

1. npm install mockjs

常用的 一些包

1. css
   bootstrap
   fontawesome
2. UI 框架 (选择一个就行了)
   element-ui
   iview