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文件
}

3. babel 配置

在項目根目錄下新建 .babelrc 文件

{
"presets": ["env"]
}

如果想要使用 草案階段ES 的語法規則 記得就是用下面的轉換規則和配置了

4. 添加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/ // 不處理這個包下的文件
}

3. 在根目錄創建 .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']
}

3. 使用 render 函數 來渲染組件。

render:c=>c(組件名稱)

使用 import Vue from 'vue' 導入的和script 引入的並不一樣。

其實這個並不常用。。也不需要配置

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

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

2. 使用 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'; 

2. 按需要導入

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);

3. 創建路由對象

var router = new VueRouter({
routes:[ // 路由匹配規則
{ path:'/home', component: HomeContainer},
]
})

4. 將路由掛載到實例對象上

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);

3. 使用 下面方式去獲取數據， 注意返回的是一個 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)

3. 在模塊內的使用方式
   this.$httpmethod
4. 使用實例

• 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