從零開始構建一個vue項目 --- webpack歷險記

本文分上、中、下三個部分(先寫上篇)

• webpack歷險記之一個簡單的vue hellowrld (上)
• vue項目搭建之vue全家桶和element ui、規範、單元測試等等。。。(中)
• vue項目優化之打包優化，頁面加載優化等等。。。(下)

代碼示例地址github.com/zwfun/zw-vu…

如下全部的知識都是從下面的參考文檔學來的，若是看過好幾遍的同窗我這篇文章就不用看了，若是沒看過的先去看幾遍，看過了實在仍是不會的同窗再來看我這篇文章

本文不寫具體的操做步驟, 只寫這個過程當中須要什麼，具體怎麼作 以參考文檔的形式給出 網上不少文章一上來就介紹安裝各類包，看完一遍以後仍是隻知其一;不知其二，無從下手。 本身寫一個文章，按本身須要的功能加載各類包。

我要作什麼

第一次配置webpack, 就從構建一個vue的helloworld項目開始。 我須要讓webpack幫我打包vue項目

一、須要webapck作什麼

這時候是否是腦殼一片空白， 不知道從什麼地方開始。 萬事開頭難，先從我須要webpack幫我作什麼開始

• 首先固然是幫我打包vue文件
• 咱們項目中會用到css,scss,js,img,字體文件，webpack是否是也能幫咱們加載css並打包
• 我會使用es6語法，考慮到兼容性問題， webpack能不能幫我轉成es5
• 開發時我須要在寫代碼的時候實時展現個人內容，須要熱更新
• 構建整個項目

ps： 也就作5件事很少嘛

二、怎麼作

開始前先看看webpack官方中文文檔-指南文檔的概念和指南，也許webpack官方文檔-配置部分你也應該看下

看完以後應該對webpack有必定的瞭解了， 那我們繼續

• webpack安裝和入口和出口配置 這些直接忽略，不會的話看官方文檔的起步章節

• webpack幫咱們打包vue文件

  • 參考vue-loader官方文檔-指北-如何衝v14遷移

  • 打包vue文件須要使用到vue-loader(Vue Loader 是一個 webpack 的 loader，它容許你以一種名爲單文件組件 的格式撰寫 Vue 組件)

  • 安裝vue-loader 參考官方文檔-手動設置

          npm install -D vue-loader vue-template-compiler
      

  • vue-loader webpack配置 參考官方文檔-手動設置

          // webpack.base.config.js
          const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
      module.exports = {
      module: {
          rules: [
          // ... 其它規則
          {
              test: /\.vue$/,
              loader: 'vue-loader'
          }
          ]
      },
      plugins: [
          // 請確保引入這個插件！
          new VueLoaderPlugin()
      ]
      }
    複製代碼

• webpack幫咱們打包css文件

  • 參考webpack官方文檔-指南-加載css
  • 參考vue-loader官方文檔-使用預處理器
  • 由於我會用到scss，以及在vue組件中使用css/scss，因此我須要使用一下三個loader幫我加載css。
    • 'vue-style-loader',
    • 'css-loader',
    • 'sass-loader'
  • 在正式環境下我須要webpack幫我把css提取出來，因此在正式環境中會使用MiniCssExtractPlugin.loader幫我提取css到單獨的文件中

        // 正式環境配置
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: 'css/'
                        }
                    },
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: 'css/'
                        }
                    },
                    
                    'css-loader'
                ]
            },
        ]
  
    // 開發環境配置
    rules: [
        {
            test: /\.scss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ]
        },
        {
            test: /\.css$/,
            use: [
                'vue-style-loader',
                'css-loader'
            ]
        }
    ]
  複製代碼

• 使用babel7幫我將es6轉爲es5

  • babel官方文檔
  • babel在線試用
  • babel選擇環境配置
  • 使用配置文件的方式配置babel7. 新建一個.babelrc,@babel/env這個preset包括支持現代 JavaScript（ES2015，ES2016 等）的全部插件， @babel/plugin-transform-runtime幫咱們動態轉義內置函數(像 Array.from 或 Object.assign 這樣的靜態方法，像Array.prototype.includes 這樣的實例方法)， 配置以下

        {
            "presets": [[
                "@babel/env",
                {
                "useBuiltIns": "entry"
                }
            ]],
            "plugins": ["@babel/plugin-transform-runtime"]
        }
    

• 加載字體和圖片等

  • 參考file-loader

  • 字體和圖片是使用file-loader加載。配置file-loader後咱們能使用像import img from './file.png'這樣的方式加載文件

        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    

• 熱更新

  • 參考使用 webpack-dev-server
  • 開發環境，使用webpack-dev-server本地服務器實現熱加載，
  • webpack中配置，瀏覽器中輸入0.0.0.0:8888便可打開項目。

     
      devServer: {
          host: '0.0.0.0',
          historyApiFallback: true,
          port: 8888
      },
    

  - 在packge.json的script中配置"start": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config build/webpack.local.config.js --progress --public --open"，這樣咱們使用webpack-dev-server加載項目，並實現熱加載

• 構建整個項目

  • 參考webpack官方文檔-指南-管理輸出
  • 參考設置-htmlwebpackplugin
  • 參考清理 /dist 文件夾
  • npm run build幫咱們構建，那咱們還須要點什麼呢？
    • 每次打包時幫咱們清空dist文件。使用(CleanWebpackPlugin)
    • 使用html模板自動將打包生成的js和css文件注入到html模板中,使用(HtmlWebpackPlugin)

          const CleanWebpackPlugin = require('clean-webpack-plugin');
          const HtmlWebpackPlugin = require('html-webpack-plugin');
          plugins: [
              new CleanWebpackPlugin(),
              new HtmlWebpackPlugin({
                  title: 'zw-vue-cli',
                  template: path.resolve(__dirname, '../', 'index.html')
              })
          ]
    

well done

一個基礎的vue webpack配置就這樣完成了

參考文檔

• webpack官方中文文檔-指北
• babel官方文檔
• vue-loader官方文檔-指北-如何衝v14遷移
• file-loader
• MiniCssExtractPlugin
• 使用 webpack-dev-server
• 設置-htmlwebpackplugin
• 清理 /dist 文件夾