webpack-4.x的使用

webpack-4.x

安裝

npm i webpack -g: 全局安裝webapck

基本使用

不使用配置文件, 通過在命令后傳遞參數(shù)的方式指定配置項. []表示可選參數(shù)

webpack默認(rèn)是以./src/index.js作為入口文件, ./dist/main.js作為出口文件
- 如果你的項目結(jié)構(gòu)和上面一樣, 直接運(yùn)行命令 webpack 進(jìn)行打包
如果需要指定入口文件和出口文件,使用以下命令行:
- webpack <entry> -o <output>
- webpack [--entry] <入口文件> --output <出口文件>

使用配置文件

當(dāng)配置項比較多的時候, 直接在命令中加入?yún)?shù)不方便, 所以可以使用一個單獨(dú)的配置文件, 來存儲一些配置項
配置文件默認(rèn)名稱:webpack.config.js
最簡單的配置文件

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
      //必須使用絕對路徑
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  }
};

打包直接使用命令webpack
如果你的配置文件名稱不是webpack.config.js, 那么可以通過命令webpack --config <配置文件>執(zhí)行打包

`webpack-dev-server`

webpack-dev-server是node平臺下的一個工具軟件
作用: 相當(dāng)于一個開發(fā)服務(wù)器,可以監(jiān)聽文件的改變, 自動進(jìn)行打包, 并且可以啟動一個開發(fā)服務(wù)器
安裝: npm i webpack-dev-server -D, 一般不需要全局安裝, 本地安裝的工具, 默認(rèn)不能直接通過命令行來執(zhí)行
依賴:
- webpack-dev-server依賴webpack, 所以一般還需要在本地安裝webpack, 即使全局已經(jīng)安裝過webpack工具
- webapck-dev-server還依賴webpack-cli,所以還必須通過命令 npm i -D webpack-cli 本地安裝webpack-cli
注意: 通過webpack-dev-server打包好的bundle.js文件并沒有寫入磁盤, 而是直接存儲在內(nèi)存中, 目的是提升效率, 因為需要頻繁的打包, 磁盤讀寫速度太慢, 所以可以通過http://localhost:8080/bundle.js訪問到
運(yùn)行:
- 使用配置文件: webpack-dev-server --config webpack.config.js
  - 自定義端口并且自動打開瀏覽器: webpack-dev-server --config webpack.config.js --port 3000 --open
- 不使用配置文件: webpack-dev-server ./src/main.js -o ./dist/bundle.js --mode development
- --open: 自動打開瀏覽器, 可以指定打開某一個瀏覽器, 比如--open Chrome
- --port: 指定端口, 默認(rèn)為8080
- --mode: 指定開發(fā)模式,可選值: production生產(chǎn)環(huán)境, development開發(fā)環(huán)境
- --progress: --progress=true,顯示打包進(jìn)度
- --https: https=true,啟用https協(xié)議, 一般瀏覽器會阻止, 因為缺少安全證書

webpack-dev-server通過配置文件指定參數(shù)

webpack.config.js

const path = require('path');
// 熱更新第二步
const webpack=require('webpack');
module.exports = {
  mode: 'development',          //可選參數(shù)`development`開發(fā)模式,`production`生產(chǎn)模式
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    // 必須使用絕對路徑
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer:{
    open:true,          //自動打開默認(rèn)瀏覽器    
    port:3000,          //指定端口    
    contentBase:'src',  //指定根目錄
    hot:true,           //熱更新第一步
    progress:true       //顯示打包進(jìn)度
  },
  plugins:[
    // 熱更新第三步
    new webpack.HotModuleReplacementPlugin()
  ]
};

package.json

dev腳本是直接指定webpack-dev-server的參數(shù), 推薦使用此種方式
dev1是通過配置文件指定webpack-dev-server的參數(shù), 相對麻煩一點(diǎn)

{
  "name": "wp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --config webpack.config.js --port 3000 --open --hot",
    "dev1":"webpack-dev-server --config webpack.config.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

html-webpack-plugin

作用:
- 根據(jù)我們提供的index.html頁面在內(nèi)存中自動生成html文件
- 將打包好的bundle.js文件自動引入內(nèi)存中html頁面
安裝: npm i html-webpack-plugin -D
修改webpack.config.js文件

const path = require('path');
// 引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');
// 熱更新第二步
const webpack=require('webpack');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer:{
    open:true,          //自動打開瀏覽器
    port:3000,          //指定端口
    contentBase:'src',  //指定服務(wù)器名根目錄
    hot:true    //熱更新第一步
  },
  plugins:[
    // 熱更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目錄+文件名
        filename:'home.html'     //內(nèi)存中的文件名
    })
  ]
};

打包c(diǎn)ss文件

webpack默認(rèn)只能打包js文件, 打包c(diǎn)ss文件需要借助第三當(dāng)?shù)膌oader加載器
所需loader:style-loader css-loader
安裝: npm i style-loader css-loader -D
配置webpack.config.js

module.exports = {
    module:{
        rules:[
        // css打包配置
        {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
};

main.js中導(dǎo)入style.css: import './css/style.css';

打包less

所需loader: less-loader `
安裝loader: npm i less-loader -D
依賴:less, 所以還必須通過npm i less -D安裝less
修改配置文件webpack.config.js:

module.exports = {
    module:{
        rules:[
        // css打包配置
        {test:/\.css$/,use:['style-loader','css-loader']},
        // less打包配置  
        {test:'\.less$',use:['style-loader','css-loader','less-loader']}
        ]
    }
}

打包scss

所需loader: sass-loader
安裝loader: npm i sass-loader -D
依賴: node-sass, 所以必須通過cnpm i node-sass -D安裝node-sass
修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

打包圖片

所需loader: url-loader
安裝loader: npm i url-loader -D
依賴: file-loader, 所以必須通過cnpm i file-loader -D安裝file-loader
修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
            {
                test:/\.(jpg|png|gif|pmb|jpeg)$/,
                use:'url-loader?limit=2048&name=[hash:8]-[name].[ext]'
            }
        ]
    }
}

打包字體文件

所需loader: url-loader
安裝loader: npm i url-loader -D
依賴: file-loader, 所以必須通過cnpm i file-loader -D安裝file-loader
修改配置文件webpack.config.js

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

下載bootstrap

bootstrap-4.x核心包中并不包含字體圖標(biāo)

下載3.x版本: npm i bootstrap@3 -S

babel-7.x

作用: 將部分瀏覽器不能識別的es6的高級語法轉(zhuǎn)換成瀏覽器成夠解析的js代碼
所需loader: babel-loader
安裝 loader: npm i babel-loader -D
所需依賴: @babel/core @babel/perset-env @babel/runtime @babel/plugin-transform-runtime
安裝依賴:

npm i @babel/core @babel/perset-env @babel/runtime  @babel/plugin-transform-runtime @babel/runtime -D

修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
              {
                test:/\.js$/,
                use:'babel-loader',
                exclude:'/node_modules/'   //不需要轉(zhuǎn)換的js文件
              }
        ]
    }
}

創(chuàng)建babel配置文件.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [
            "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties","@babel/plugin-transform-classes"
    ]
}

移除webpack打包嚴(yán)格模式

注意:
- babel-7.x的包名叫做@babel/plugin-transform-strict-mode
- babel-6.x的包名叫做babel-plugin-transform-remove-strict-mode
使用babel插件@babel/plugin-transform-strict-mode
- 裝包: cnpm i @babel/plugin-transform-strict-mode -D
- 配置babel配置文件.babelrc
```
{
"plugins": ["@babel/plugin-transform-strict-mode"]
}
```
參考文檔: @babel/plugin-transform-strict-mode

babel忽略對第三方j(luò)s轉(zhuǎn)碼

修改.babelrc,添加如下配置項

{
    "ignore": [
        "./src/lib/mui/js/*.js"
    ]
}

常見babel插件

@babel/plugin-proposal-class-properties: 解析es6類class中的屬性
@babel/plugin-transform-classes: 解析es中的class
@babel/plugin-transform-arrow-functions: 解析es6中的箭頭函數(shù)
@babel/plugin-transform-block-scoping: 解析es6中的塊級作用域

使用webpack構(gòu)建vue項目

裝包

npm i vue -S

安裝loader和依賴

npm i vue-loader vue-template-compiler -D

導(dǎo)入

import Vue from 'vue'

默認(rèn)導(dǎo)入的vue包不是vue.js, 而是vue-runtime.js這個包不能直接使用

解決方案一: import Vue from '../node_modules/vue/dist/vue.js'
解決方案二: 修改webpack.config.js ,添加如下配置

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

安裝`vue-loader`

npm i vue-loader -D
引入VueLoaderPlugin: 修改webpacke配置文件

/* 導(dǎo)入VueLoaderPlugin*/
const {VueLoaderPlugin}=require('vue-loader');
/*在plugin節(jié)點(diǎn)加入配置*/
plugins:[
    // 熱更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目錄+文件名
        filename:'index.html'     //內(nèi)存中的文件名
    }),
    // vue-loader插件
    new VueLoaderPlugin()
]

`main.js`

/* 導(dǎo)入vue核心包vue.js*/
import Vue from 'vue'

/*導(dǎo)入login組件*/
import login from 'login.vue'

var vm=new Vue({
    el:'#app',
    data:{
        msg:'Hello Vue.js'
    },
    /* 調(diào)用render方法渲染login組件 */ 
    /* 簡寫: render:c=>c(login)*/ 
    render(c){
        return c(login);
    }
});

集成`vue-router` 路由組件

裝包: npm i vue-router -S
導(dǎo)入: import VueRouter from 'vue-router'
安裝: Vue.use(VueRouter)

使用mint-ui

裝包: npm i min-ui -S
導(dǎo)包
- 全部導(dǎo)入:
  - 第一步: 導(dǎo)入全部組件 import mint from 'mint-ui'
  - 第二步: 導(dǎo)入樣式文件 import 'mint-ui/lib/style.css'
  - 第三步: 注冊組件Vue.use(mint)
- 按需導(dǎo)入:
  - 第一步: 導(dǎo)入組件 import {Button} from 'mint-ui'
  - 第二步: 注冊組件 Vue.component(Button.name,Button)
  - 配置babel
    - 安裝babel-plugin-component插件
    - 修改babel配置文件.babelrc(注意: 此處是babel-7.x的配置文件)
```
{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-classes",
        [
            "component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ]
}
```

使用webpack-dev-server進(jìn)行跨域請求

修改`webpack.config.js`

devServer:{
    proxy: {
      '/api': {
          target: 'http://www.duans.top/freeApi',
          /*pathRewrite
          如果不加此配置, 最終請求url為http://www.duans.top/freeApi/api/xxx.php;
          可能真實的url地址為:http://www.duans.top/freeApi/xxx.php
          */ 
          pathRewrite: {'^/api' : ''},  
          changeOrigin: true,           // target是域名的話莱找，需要這個參數(shù)，
          secure: false                 // false表示可以請求運(yùn)行在HTTPS協(xié)議下的數(shù)據(jù)接口
      },
     '/api2/':{
         ...
     }

    }
  },

參考文檔

官方文檔
 第三方文檔

附件

最終配置

webpack配置文件`webpack.config.js`

const path = require('path');
// 引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');
// 熱更新第二步
const webpack=require('webpack');

// vue-loader插件
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'development',    //production
  entry: path.resolve(__dirname, './src/main.js'),
  // entry:["@babel/polyfill",path.resolve(__dirname, './src/main.js')],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // webpack-dev-server的配置節(jié)點(diǎn)
  devServer:{
    open:true,          //自動打開瀏覽器
    port:3000,          //指定端口
    contentBase:'src',  //指定服務(wù)器名根目錄
    hot:true,    //熱更新第一步
    progress:false,  //顯示打包進(jìn)度
    quiet:false,
    proxy: {
      '/api': {
          target: 'http://www.duans.top/freeApi',
          pathRewrite: {'^/api' : ''},
          changeOrigin: true,     // target是域名的話尿瞭，需要這個參數(shù)抡锈，
          secure: false
      }
    }
  },
  plugins:[
    // 熱更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目錄+文件名
        filename:'index.html'     //內(nèi)存中的文件名
    }),
    // vue-loader插件
    new VueLoaderPlugin()

  ],
  module:{
    rules:[
      // css打包配置
      {test:/\.css$/,use:['style-loader','css-loader']},
      // less配置
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      //打包scss
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
      //打包圖片
      {
        test:/\.(png|gif|jpg|jpeg|bmp)$/,
        use:'url-loader?limit=2048U&name=[hash:8]-[name].[ext]'
      },
      //打包字體文件
      {
        test:/\.(ttf|eot|svg|woff|woff2|otf)$/, 
        use: 'url-loader'
      },
      //babel配置
      {
        test:/\.js$/,
        use:'babel-loader',
        exclude:['/node_modules/']   //不需要轉(zhuǎn)換的js文件
      },
      //打包.vue
      {
        test:/\.vue$/,
        use:'vue-loader'
      }
    ]
  },
  resolve:{
    alias:{
      "vue$":"vue/dist/vue.js"
    }
  }
 
};

babel配置文件`.babelrc`

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-classes",
        "@babel/plugin-transform-strict-mode",
        [
            "component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ],
    "ignore":[
        "./src/lib/mui/js/*.js"
    ]
}

package.json

{
  "name": "wp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server  --contentBase src --open --hot",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.1.1",
    "jquery": "^3.3.1",
    "mint-ui": "^2.2.13",
    "moment": "^2.23.0",
    "popper.js": "^1.14.6",
    "vue": "^2.5.22",
    "vue-preview": "^1.1.3",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-classes": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/plugin-transform-strict-mode": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/runtime": "^7.2.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-component": "^1.1.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.5.1",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

常見錯誤及解決方案

問題一

webpack-cannot-find-module.png

解決方案: 刪除node_modules文件夾, 重新運(yùn)行命令npm i進(jìn)行裝包

問題二

package.json.png

報錯原因: package.json文件中寫了注釋
- .json的文件中是不能書寫注釋的

問題三

babel-es6-class-property.png

解決方案: 通過npm i @babel/plugin-proposal-class-properties -D安裝babel插件

問題四

@babel-runtime.png

報錯原因: babel-7.x需要安裝@babel-runtime依賴包
解決方案: 通過npm i @babel-runtime -D安裝babel插件

問題五

need-loader.png

報錯原因: 缺少特殊文件的處理loader
解決方案: 安裝并配置對應(yīng)的loader加載器

問題六

VueLoaderPlugin.png

報錯原因: webpack-4.x或者vue-loader^15.5.1需要在配置文件中添加VueLoaderPlugin插件
解決方案: 修改webpack.config.js

/* 第一步 */
const VueLoaderPlugin=require('vue-loader');
/* 第二步: 在plugin配置節(jié)點(diǎn)中增加如下配置*/
plugins:[
    new VueLoaderPlugin()
]

問題七

error-port-used.png

報錯原因: 端口被占用
解決方案:
- 修改端口
- 關(guān)閉占用端口的進(jìn)程

雜項

導(dǎo)入導(dǎo)出語法

es6中

導(dǎo)入

import:
- import Vue from 'vue'

導(dǎo)出

export default:
- 在一個模塊中, 只能使用一次, 只允許向外暴露一次成員;
- 導(dǎo)入時可以使用任意變量來接收
export:
- 按需導(dǎo)出;
- 在一個模塊中可以使用多次, 向外暴露多次;
- 導(dǎo)入時需要使用{}來接收, 并且只能使用導(dǎo)出的時候使用的變量名進(jìn)行接收

查看項目所安裝依賴包的具體版本

直接打開package.json文件即可查看

npm查看指定軟件包的版本

npm view jquery versions: 查看所有版本
npm view jquery version: 查看已安裝的版本
npm jquery info: 查看最新版本

同時安裝多個包

使用空格分割:npm style-loadder css-loader -D

刪除包

npm un jquery -S

npm腳本

package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mysql":"mysql -hlocalhost -uroot -proot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

在package.json文件中的script對象中, 可以自定義一些執(zhí)行腳本, 通過npm run <自定義腳本名稱> 來運(yùn)行, 從而完成一些系統(tǒng)操作; 比如: 通過npm run mysql連接mysql服務(wù)器, 前提是你的操作系統(tǒng)安裝了mysql數(shù)據(jù)庫軟件, 并且啟動了mysql服務(wù)

在線文檔

webpack

webpack官網(wǎng)

webpack中文文檔

wepack-dev-server相關(guān)文檔

babel

babel-7.x在線文檔

babel-7.x官方英文文檔

babel-7x常見問題

最后編輯于：2019.01.24 19:39:54

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末焦履，一起剝皮案震驚了整個濱河市岛琼，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌仿滔，老刑警劉巖惠毁，帶你破解...
沈念sama閱讀 206,378評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異堤撵，居然都是意外死亡仁讨，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,356評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門实昨，熙熙樓的掌柜王于貴愁眉苦臉地迎上來洞豁，“玉大人，你說我怎么就攤上這事荒给≌尚” “怎么了？”我有些...
開封第一講書人閱讀 152,702評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵志电，是天一觀的道長曙咽。經(jīng)常有香客問我，道長挑辆，這世上最難降的妖魔是什么例朱？我笑而不...
開封第一講書人閱讀 55,259評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任孝情，我火速辦了婚禮，結(jié)果婚禮上洒嗤，老公的妹妹穿的比我還像新娘箫荡。我一直安慰自己，他們只是感情好渔隶，可當(dāng)我...
茶點(diǎn)故事閱讀 64,263評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布羔挡。她就那樣靜靜地躺著，像睡著了一般间唉。火紅的嫁衣襯著肌膚如雪绞灼。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,036評論 1贊 285
城市分裂傳說
那天呈野，我揣著相機(jī)與錄音低矮，去河邊找鬼。笑死际跪，一個胖子當(dāng)著我的面吹牛商佛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播姆打，決...
沈念sama閱讀 38,349評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼良姆，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了幔戏？” 一聲冷哼從身側(cè)響起玛追，我...
開封第一講書人閱讀 36,979評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎闲延，沒想到半個月后痊剖，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,469評論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡垒玲，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,938評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年陆馁，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片合愈。...
茶點(diǎn)故事閱讀 38,059評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡叮贩，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出佛析，到底是詐尸還是另有隱情益老，我是刑警寧澤，帶...
沈念sama閱讀 33,703評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布寸莫，位于F島的核電站捺萌，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏膘茎。R本人自食惡果不足惜桃纯，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,257評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一酷誓、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧慈参，春花似錦呛牲、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,262評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽着茸。三九已至壮锻，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間涮阔，已是汗流浹背猜绣。一陣腳步聲響...
開封第一講書人閱讀 31,485評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留敬特，地道東北人掰邢。一個月前我還...
沈念sama閱讀 45,501評論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長得像伟阔，于是被迫代替她去往敵國和親辣之。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,792評論 2贊 345

webpack-4.x的使用

webpack-4.x

安裝

基本使用

使用配置文件

webpack-dev-server

webpack-dev-server通過配置文件指定參數(shù)

package.json

html-webpack-plugin

打包c(diǎn)ss文件

打包less

打包scss

打包圖片

打包字體文件

下載bootstrap

babel-7.x

移除webpack打包嚴(yán)格模式

babel忽略對第三方j(luò)s轉(zhuǎn)碼

常見babel插件

使用webpack構(gòu)建vue項目

裝包

安裝loader和依賴

導(dǎo)入

安裝vue-loader

main.js

集成vue-router 路由組件

使用mint-ui

使用webpack-dev-server進(jìn)行跨域請求

修改webpack.config.js

參考文檔

附件

最終配置

webpack配置文件webpack.config.js

babel配置文件.babelrc

package.json

常見錯誤及解決方案

問題一

問題二

問題三

問題四

問題五

問題六

問題七

雜項

導(dǎo)入導(dǎo)出語法

es6中

導(dǎo)入

導(dǎo)出

查看項目所安裝依賴包的具體版本

npm查看指定軟件包的版本

同時安裝多個包

刪除包

npm腳本

在線文檔

webpack

webpack官網(wǎng)

webpack中文文檔

wepack-dev-server相關(guān)文檔

babel

babel-7.x在線文檔

babel-7.x官方英文文檔

babel-7x常見問題

推薦閱讀更多精彩內(nèi)容

`webpack-dev-server`

安裝`vue-loader`

`main.js`

集成`vue-router` 路由組件

修改`webpack.config.js`

webpack配置文件`webpack.config.js`

babel配置文件`.babelrc`