打包命令

• 在當(dāng)前項(xiàng)目路徑下, 輸入命令

• $ webpack 入口 出口

• 注意: webpack 命令是全局命令

webpack ./src/main.js ./dist/bundle.js

配置 webpack.config.js 文件

• 通過(guò) Node.js 導(dǎo)入 pash 包
• 使用 Node.js 前, 初始化 npm

npm init

倒入模塊路徑

const path = require("path");

配置

module.exports = {
  entry: "./src/main.js", // 入口
  output: {
    // 出口對(duì)象
    path: path.resolve(__dirname, "dist"), // 出口文件路徑
    filename: "bundel.js", // 出口文件名字
    publicPath: "dist/" // 打包資源后自動(dòng)為url锰悼、src添加文件路徑
  }
}

配置 package.json 文件

通過(guò) npm init 得到的 json 文件配置

{
  "name": "meetwebpack",  // 項(xiàng)目名稱
  "version": "1.0.0",   // 項(xiàng)目版本
  "description": "",    // 描述
  "main": "index.js",
  "scripts": {    // 腳本命令映射
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"  // 是否開(kāi)源
}

• 將 webpack 命令 映射到npm run build上
  • 且優(yōu)先在項(xiàng)目中尋找本地命令, 如果本地沒(méi)有該命令再去全局找此命令

Webpack 打包 (ES6/TS 轉(zhuǎn) ES5, Less 轉(zhuǎn) css, vue 轉(zhuǎn) js 等)

• 在入口 js 中導(dǎo)入此文件

  • 例如: require("./css/normal.css");

• 為 Webpack 擴(kuò)展 loader

  • 更多 loader 請(qǐng)上 Webpack官方文檔 查詢

loader 使用

• 通過(guò) npm 安裝需要使用的 loader

• 在官網(wǎng)上查找對(duì)應(yīng)的 loader, 例如 css 的 loader: css-loader

• 在 webpack.config.js 中的 module 關(guān)鍵字下進(jìn)行配置

安裝

npm install css-loader --save-dev

配置

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

• css-loader 只負(fù)責(zé)加載 CSS 文件, 不會(huì)幫助我們解析文件
  • 所以我們還需要安裝解析 CSS 文件的 loader

npm install style-loader --save-dev

• 然后在 use 屬性中添加style-loader

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

• 注意: 在使用多個(gè) loader 時(shí), Webpack 從右向左執(zhí)行
  • 即添加style-loader必須放在css-loader左邊

ES6 轉(zhuǎn) ES5

• 需要使用 babel 的 loader

安裝

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["es2015"]
        }
      }
    }
  ]
}

配置 Vue

安裝

npm install vue --save

導(dǎo)入 vue

import Vue from "vue"

• runtime-only 代碼中, 不可以使用任何的 template

• runtime-compiler 代碼中, 可以使用 template, 因?yàn)橛?compiler 可以用于編譯 template

• 解決方案: 指定版本, 在 webpack.config.js 中配置

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

編譯 .vue 文件

• 想要編譯 Vue, 需要安裝兩個(gè) loader 和相應(yīng)的 loader 配置

• vue-loader(14.x 版本開(kāi)始, 要想使用該 loader 還需要配置一個(gè)插件, 或降低版本, 降低版本后需要重新 npm install)

• vue-template-compiler (用于解析.vue文件中的template)

Plugin 插件

添加版權(quán)的 Plugin

• 該插件名字叫 BannerPlugin, 屬于 Webpack 自帶的插件

• 按照下面的方式來(lái)修改 webpack.config.js 文件

const webpack = require("webpack")
module.exports = {
  plugins: [new webpack.BannerPlugin("版權(quán)歸 coerlion 所有")]
}

打包 HTML 的 plugin

• 如何將 index.html 打包到 dist 文件夾中呢?
  • HtmlWebpackPlugin 插件可以為我們做這些事情
  • 自動(dòng)生成一個(gè) index.html 文件(可以指定模板來(lái)生成)
  • 將打包的 JS 文件, 自動(dòng)通過(guò) script 標(biāo)簽插入到 body 中

安裝 html-webpack-plugin 插件

npm install html-webpack-plugin --save-dev

• 使用插件, 修改 webpack.config.js 文件中的 plugins 部分內(nèi)容如下

先導(dǎo)入 html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin")

再到 module.exports 下進(jìn)行配置

plugins: [
  new htmlWebpackPlugin({
    template: "index.html"
  )}
]

• 這里的 template 表示根據(jù)什么模版來(lái)生成 index.html

  • 在當(dāng)前目錄下, 根據(jù) index.html 模板文件來(lái)生成一個(gè)在 dist 文件夾下的 index.html 文件

• 另外, 我們需要?jiǎng)h除之前在 output 中添加的 publicPath 屬性, 否則插入的 script 標(biāo)簽中的 src 可能會(huì)有問(wèn)題

js 壓縮的 Plugin

使用第三方插件uglifyjs-webpack-plugin, 并且版本號(hào)指定 1.1.1, 和 CLI2 保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

• 修改 webpack.config.js 文件, 并且使用

先導(dǎo)入uglifyjs-webpack-plugin

const uglifyJsPlugin = require("uglifyjs-webpack-plugin");

再到 module.exports 下進(jìn)行配置

plugins: {
  new uglifyJsPlugin()
}

搭建本地服務(wù)器

• Webpack 提供了一個(gè)可選的本地開(kāi)發(fā)服務(wù)器, 這個(gè)本地服務(wù)器基于 Node.js 搭建, 內(nèi)部使用 express 框架

• 它可以實(shí)現(xiàn)我們想要的讓瀏覽器自動(dòng)刷新顯示我們修改后的結(jié)果(它不會(huì)編譯文件到磁盤(pán)中, 而是存儲(chǔ)在內(nèi)存中)

安裝

npm install --save-dev webpack-dev-server@2.9.3

• devServer 也是作為 module.exports 中的一個(gè)選項(xiàng), 選項(xiàng)本身可以設(shè)置如下屬性:
  1. contentBase: 為哪一個(gè)文件夾提供本地服務(wù), 默認(rèn)是根文件夾, 我們這里要填寫(xiě)./dist
  2. port: 端口號(hào)
  3. inline: 頁(yè)面是否實(shí)時(shí)刷新
  4. historyApiFallback: 在 SPA 頁(yè)面中, 依賴 HTML的 history 模式

module.exports 配置修改如下:

devServer: {
  contentBase: "./dist",
  inline: true
}

使用

• 方法 1: node_modules/.bin/webpack-dev-server

• 方法 2: 在 package.json 中添加 scripts 屬性"dev": "webpack-dev-server", 即可通過(guò)npm run dev的方式直接使用

  • webpack-dev-server 命令參數(shù)
    • 例如 "dev": "webpack-dev-server --open"
    • open 參數(shù)表示直接打開(kāi)瀏覽器

Webpack 配置文件分離

1. 開(kāi)發(fā)時(shí)配置文件 和 運(yùn)行時(shí)配置文件的分離

2. 創(chuàng)建文件夾 build

3. 創(chuàng)建文件 base.config.js 存放開(kāi)發(fā)時(shí)和運(yùn)行時(shí)依賴

4. 創(chuàng)建文件 dev.config.js 存放開(kāi)發(fā)時(shí)依賴

5. 創(chuàng)建文件 prod.config.js 存放運(yùn)行時(shí)依賴

安裝 webpack-marge

npm install webpack-merge --save-dev

合并三個(gè)文件

• 修改 base.config.js 配置文件

• 將所有開(kāi)發(fā)時(shí)梧税、運(yùn)行時(shí)依賴存放到該文件之后修改 path 路徑

path: path.resolve(__dirname, "../dist")

修改 prod.config.js 配置文件

// 運(yùn)行時(shí)依賴
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin")
const webpackMerge = require("webpack-merge")
const baseConfig = require("./base.config")

module.exports = webpackMerge(baseConfig, {
  plugins: [new UglifyjsWebpackPlugin()]
})

修改 dev.config.js 配置文件

// 開(kāi)發(fā)時(shí)依賴
const webpackMerge = require("webpack-merge")
const baseConfig = require("./base.config")

module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: "./dist",
    inline: true
  }
})

修改 package.json 中的 scripts 下的 build 和 dev 屬性為:

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"