webpack項目打包+Vue組件化開發

0 簡介

webpack是一個可以將所有腳本、圖片、樣式、資源靜態模塊打包工具，打包模塊化方式的源碼。

webpack依賴於node，需要先安裝nodejs和npm:

$ sudo apt install nodejs
$ sudo apt install npm

npm簡單使用：

• npm install [email protected] -g：安裝webpack.
  -g 表示全局安裝， --save-dev表示局部安裝，開發時依賴，打包後不使用。

1 項目結構

• dist文件夾：存放打包之後的文件
• src文件夾：存放項目源文件
• index.html: 項目打開的首頁
• package.json: 使用npm init生成，npm包管理配置

2 打包項目

2.1 簡單打包

通過簡單的

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

命令打包源碼，並生成目標代碼bundle.js.

然後在html文件中直接通過：

<script src="./dist/bundle.js"></script>

引用。

2.2 配置文件打包

創建webpack.config.js文件進行打包配置：

const path = require('path')

module.exports = {
  // 入口： 可以是字符串、數組或對象
  entry: './src/main.js',
  // 出口：打包後生成的文件信息
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
      	// 樣式loader,允許將樣式也進行打包
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

因爲要將樣式也打包，所以要安裝一些loader模塊:

$ npm install --save-dev css-loader style-loader

然後可以直接通過簡單的：

$ webpack

命令進行打包。

2.3 npm配置打包

在2.2中通過webpack命令打包時，雖然打包命令已經很簡單了，但如果需要安裝其他模塊時，還要分別手動使用npm install去安裝各個模塊，還是有些麻煩。

可以通過配置package.json配置npm依賴以及通過npm腳本去執行webpack命令：

{
  "name": "wevpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.5.3",
    "style-loader": "^1.2.1",
    "webpack": "^3.6.0"
  }
}

首先執行

$ npm install

安裝所有依賴，然後通過

$ npm run build

進行打包。

注意：通過npm命令執行打包首先會從本地的node_modules/.bin路徑尋找相應的命令，而直接用webpack打包是從全局的環境變量中尋找。

3 loader

對於非js的靜態資源，需要使用loader來預處理文件。

使用過程：

• 步驟一：通過npm安裝需要使用的loader
• 步驟二：在webpack.config.js的modules下進行配置

3.1 樣式loader

要打包css樣式，需要進行以下配置：
首先安裝：

$ npm install --save-dev css-loader style-loader

然後配置：

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

最後導入相關樣式:

// 導入樣式
require('./css/normal.css')

less文件配置：

$ npm install --save-dev less-loader less

修改配置文件：

{
  test: /\.less$/,
  use: [{
    loader: "style-loader" // creates style nodes from JS strings
  }, {
    loader: "css-loader" // translates CSS into CommonJS
  }, {
    loader: "less-loader" // compiles Less to CSS
  }]
}

3.2 圖片資源

圖片資源屬於文件，主要有url-loader和file-loader兩種加載器。

• url-loader配置：

$ npm install --save-dev url-loader

配置文件：

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  ]
}

圖片小於limit時，對圖片進行base64編碼，如果大於limit，則需要用file-loader進行加載：

$ npm install --save-dev file-loader

再次打包會在dist目錄下生成對應圖片文件：

此時圖片並不能正確加載，因爲代碼中引入的是src目錄下的圖像，所以需要在webpack.config.js下配置publicPath路徑：

// 出口：打包後生成的文件信息
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: 'dist/'	// 使用html模板生成頁面時不需要指定該路徑
},

另外，因爲生成的圖片文件名特別長，且和原圖片名看不出聯繫，可以進行配置修改文件名：

{
  loader: 'url-loader',
  options: {
    limit: 8192,
    name: 'img/[name].[hash:8].[ext]'
  }
}

3.3 ES6語法處理

有些瀏覽器還不支持ES6，可以通過babel將ES6轉化爲ES5:

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

配置：

{
  // 添加ES6轉ES5 babel-loader
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['es2015']
    }
  }
}

4 plugins

插件的使用過程：

• 步驟一：通過npm安裝，有些webpack已經內置不用安裝
• 步驟二：在webpack.config.js的plugins中傳入插件實例。

4.1 添加版權的plugin

BannerPlugin插件是webpack自帶的插件，在webpack.config.js中進行配置：

const webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    new webpack.BannerPlguin('最終版權歸某某所有')
  ]
}

之後再打包的話，在生成的文件頭部都會生成上面那句話。

4.2 打包html的plugin

一般自己的index.html文件放在項目根目錄下，在dist文件夾下沒有該文件，使用HtmlWebpackPlugin插件可以（指定模板）生成html文件。

先安裝插件：

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

修改配置文件：

const webpack = require('webpack')

module.exports = {
  ...
  plugins: [
    new webpack.BannerPlguin('最終版權歸某某所有')
  ]
}

5 配置vue

首先安裝vue:

$ npm install vue --save

因爲程序在運行時也需要使用vue,所有使用--save安裝運行時依賴。
在webpack.config.js的module同級層進行配置：

resolve: {
  extensions: ['.js', '.css', '.vue'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js'
  }
},

之後就可以進行Vue開發。

5.1 原始vue開發

原始vue開發，主要是區分於.vue文件組件化開發。這種模式下，主要分爲以下個部分：

• js文件內註冊組件：

// 使用Vue進行開發
import Vue from 'vue'

new Vue({
  el: '#app',
  template: `
    <h2>{{message}}</h2>
  `,
  data: {
    message: 'hhhhhhhhh'
  }
})

• html文件內使用組件：

<body>
  <div id="app"></div>

  <script src="./dist/bundle.js"></script>
</body>

注意：當實例內el和templage都存在時，使用組件時會自動用template模板內容替換掉對應el的模板。

5.2 Vue組件化開發

5.2.1 開發環境配置

首先安裝：

$ npm install vue-loader vue-template-compiler --save-dev

修改webpack.config.js文件：

const path = require('path')
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
  // 入口： 可以是字符串、數組或對象
  entry: './src/main.js',
  // 出口：打包後生成的文件信息
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  resolve: {
  	extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {...
  },
  plugins: [
    // plugin for new vue-loader
    new VueLoaderPlugin()
  ]
}

5.2.2 組件開發

然後就可以開發.vue組件：

<template>
  <!-- 組件的模板 -->
</template>

<script>
export default {
  // 組件的構造器對象
  name: 'App',  // 組件標籤
  data() {		// 組件data只能是函數
    return {    // 返回對象
    }
  }
}
</script>

<style>
  // 樣式
</style>

5.2.3 組件使用

<App/>

6 搭建本地服務器

基於node.js搭建，內部使用express框架，實現瀏覽器自動刷新修改結果。

首先安裝：

$ npm install --save-dev [email protected]

在webpack.config.js的devServer中進行配置：

devServer: {
  contentBase: './dist',	// 啓動web項目目錄
  inline: true,				// 頁面實時刷新
  port: 8080				// 監聽端口號
}

在package.json中配置啓動腳本：

"dev": "webpack-dev-server --open"

之後使用npm run dev即可啓動本地服務器，進行調試。