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