webpack4.0搭建vue教程

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 .\src\main.js .\dist\bundle.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\n');
});

添加运行 服务器脚本

在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%的浏览器
二、最后2个版本的浏览器
三、大于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