Vue學習6-(webpack發佈策略)

上一篇 Vue學習5-(webpack)
下一篇 Vue學習7-MinUI組件與項目託管到碼雲上

---

一、開發階段配置webpack

1. 創建webpack.config.js的配置文件
   • entry 指定項目的入口
   • output 輸出相關的配置
   • plugins 和插件有關
   • module 和第三方loader相關
   • rules 第三方loader的匹配規則
2. 安裝了工具webpack-dev-server
3. html-webpack-plugin
4. 處理第三方文件：安裝並配置第三方的loader
   style-loader css-loader 【style-loader css-loader】
   style-loader css-loader less-loader 【less-loader less】
   style-loader css-loader sass-loader 【sass-loader node-sass】
   url-loader 【url-loader file-loader】
   babel-loader 同時要添加exclude排除項 【babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0】

二、webpack的發佈策略

1、在實際開發中，一般會有兩套項目方案：

一套是開發期間的項目，包含了測試文件、測試數據、開發工具、測試工具等相關配置，有利於項目的開發和測試，但是這些文件僅用於開發，發佈項目時候需要剔除；
另一套是部署期間的項目，剔除了那些客戶用不到的測試數據測試工具和文件，比較純淨，減少了項目發佈後的體積，有利於安裝和部署！

2、新建webpack.publish.config.js文件

爲了滿足我們的發佈策略，需要新建一個配置文件，命名爲webpack.publish.config.js，將webpack.config.js的配置拷貝過去，然後在package.json中的追加“pub”，如圖：

package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --host 127.0.0.1 --hot",
    "pub": "webpack --config webpack.publish.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.6.0",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "mint-ui": "^2.2.13",
    "vue": "^2.5.13",
    "vue-router": "^3.0.1"
  }
}

3、修改url-loader，將圖片放入統一的images文件夾之下：

三、每次重新構建時候刪除dist目錄

1. 運行 npm i clean-webpack-plugin --save-dev
2. 在頭部引入這個插件：
   
3. 在plugins節點下使用這個插件：
   

四、分離第三方包改造webpack.publish.config.js

1、改造entry節點如下：

2、在plugins節點下新增插件：

3、html-webpack-plugin在生成index.html文件的時候，會自動將抽離的第三方包引入進去！

五、優化壓縮JS

https://webpack.js.org/configuration/plugins/#plugins

在plugins數組中添加：

六、優化壓縮HTML文件

在plugins節點下的htmlWebpackPlugin插件中，添加minify子節點：

七、抽取CSS文件

1. 運行 npm install --save-dev extract-text-webpack-plugin 安裝抽取CSS文件的插件。

2. 在配置文件中導入插件：
   

3. 修改CSS和Sass的loader如下：
   

4. 在plugins節點下新增插件：
   

八、壓縮抽取出來的CSS文件

1、運行 npm i optimize-css-assets-webpack-plugin --save-dev 安裝插件到開發依賴。
2、在配置文件頭部導入插件：

3、在plugins節點下新增插件：

九、完整的webpack.publish.config

const path = require('path')
// 1. 導入 在內存中生成頁面的webpack插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 導入刪除文件夾的 插件
const cleanPlugin = require('clean-webpack-plugin')
// 導入 webpack 這個模塊
const webpack = require('webpack')
// 導入抽取CSS樣式文件的插件
const extractTextPlugin = require('extract-text-webpack-plugin')
// 導入優化壓縮CSS樣式表的插件
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')


// 使用Node語法，向外暴露配置對象，從而，讓webpack運行的時候，加載指定的配置
// 爲什麼可以使用Node語法？因爲 webpack 這個工具，就是基於node構建的；
module.exports = {
  entry: {
    app: path.join(__dirname, './src/main.js'), // 這是項目的主入口文件
    vendors: ['jquery'] // 這是第三方包的名稱
  }, // 項目的入口文件
  output: {
    path: path.join(__dirname, './dist'), // 輸出路徑
    filename: 'js/index.js' // 輸出文件名
  }, // 打包好的文件的數據配置
  plugins: [ // 插件配置節點
    new htmlWebpackPlugin({ // 創建一個 htmlWebpackPlugin 的實例對象
      template: path.join(__dirname, './src/index.html'), // 指定模板頁面路徑
      filename: 'index.html', // 指定內存中生成的HTMl文件名稱
      minify: { // 表示提供壓縮選項
        removeComments: true, // 移除頁面中的註釋
        collapseWhitespace: true, // 合併空白字符
        removeAttributeQuotes: true // 移除屬性節點上的引號
      }
    }),
    new cleanPlugin(['dist']), // 指定每次重新發布的時候，要先刪除的文件夾
    new webpack.optimize.CommonsChunkPlugin({ // 抽離第三方包的插件
      name: 'vendors', // 指定要從哪個入口名稱中抽離文件
      filename: 'js/vendors.js' // 指定抽離出來的第三方包，文件名叫做什麼
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false // 壓縮完畢的代碼中，移除警告信息
      }
    }),
    new webpack.DefinePlugin({ // 此插件的作用，相當於在項目的全局，配置了一些全局可用的變量；將來，我們引用的第三方包中，比如Vue，會檢查webpack中有沒有提供 process.env.NODE_ENV 字段，如果有，並且字段的名字爲 "production"， 就表示是生產發佈環境，那麼會移除不必要的Vue警告功能；並做其它優化！
      'process.env.NODE_ENV': '"production"',
      'myVar': '"1234"'
    }),
    new extractTextPlugin('css/styles.css'), // 抽取CSS文件到單獨的目錄中
    new optimizeCSSAssetsPlugin() // 自動壓縮CSS
  ],
  module: { // 用來配置 非JS文件對應的loader的
    rules: [ // 就是這些 非 JS 文件 和 loader 之間的對應關係
      {
        test: /\.css$/, use: extractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
          publicPath: '../' // 表示，如果將來生成的樣式中，包含 路徑，那麼，需要自動在路徑前面加上 ../ 前綴
        })
      }, // 創建處理 css 文件的 loader 匹配規則
      {
        test: /\.less$/, use: extractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader'],
          publicPath: '../'
        })
      }, // 配置處理less文件的規則
      {
        test: /\.scss$/, use: extractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader'],
          publicPath: '../'
        })
      }, // 配置 處理 scss 文件的規則
      { test: /\.jpg|png|gif|bmp$/, use: 'url-loader?limit=7631&name=images/[hash:8]-[name].[ext]' }, // 配置 處理 樣式表中圖片的 loader規則
      // 可以使用?給 url-loader傳遞參數，其中，有一個固定的參數，叫做 limit，表示圖片的大小，需要給定一個 數值；
      // limit 給定的這個數值，是 圖片的大小，單位是 Byte（字節）
      // 如果指定了 limit 參數，則只有圖片的大小，小於給定的 值時候，纔會轉爲base64格式的圖片；否則，就不轉換；
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 添加轉換JS文件的loader，其中，必須把 node_modules 目錄設置爲 排除項，這樣，在打包的時候，會忽略node_modules 目錄下的所有JS文件；否則項目運行不起來！
    ]
  }
}

---

上一篇 Vue學習5-(webpack)
下一篇 Vue學習7-MinUI組件與項目託管到碼雲上