前言

平常在工作開發(fā)中，為了效率我們通常都會(huì)直接使用Vue-cli腳手架去搭建Vue開發(fā)環(huán)境，確實(shí)這種工具是節(jié)省了我們不少時(shí)間，但是你有沒有想過Vue開發(fā)環(huán)境是如何搭建起來的？還有如果是你自己動(dòng)手去搭建，能順利搭建起來嗎？

基于這些想法，我就搗鼓了一下webpack4，并且弄下來了這個(gè)小項(xiàng)目，感覺一個(gè)小項(xiàng)目下來收貨還是挺大的，所以就寫一遍文章，分享心得，哈哈??！

基于個(gè)人的時(shí)間精力問題，把本項(xiàng)目教程分為兩部分：

• webpack4手動(dòng)搭建Vue開發(fā)環(huán)境 （本篇文章）
•  手動(dòng)搭建Vue項(xiàng)目文件夾實(shí)現(xiàn)todoList （包括Vue全家桶）

希望你能把教程看完，并且能收貨到你想要的東西，嘻嘻，好了，開始??！

一、搭建webpack運(yùn)行環(huán)境

鑒于文章篇幅的長(zhǎng)度，本教程不會(huì)詳細(xì)講述webpack4的知識(shí)點(diǎn)，如果對(duì)搭建步驟有什么疑惑的或者有知識(shí)點(diǎn)看不懂的，可以先自行Google搜索一下，我悄悄跟你說，webpack4還是有很多坑的，但是所謂的進(jìn)步就是不斷不斷地踩坑（捂臉表情）！！

初始化項(xiàng)目

在命令行中運(yùn)行 npm init -y 初始化項(xiàng)目，生產(chǎn) package.json 文件

安裝webpack依賴

npm i webpack webpack-cli --save-dev

基本項(xiàng)目目錄搭建

webpack.base.dev.js基本配置

修改腳本命令

在修改 package.json 文件里的 scripts 配置

運(yùn)行webpack

在 main.js 里面輸入 document.write("Hello World")

根據(jù)上述圖片配置 webpack.base.dev.js 文件

在命令行中運(yùn)行 npm run test 命令，dist文件夾里會(huì)有js文件生成

在 index.html 引入，若成功輸出 Hello World 即證明webpack運(yùn)行環(huán)境配置成功...

二、開始搭建Vue環(huán)境

Vue運(yùn)行環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境，不同的環(huán)境對(duì)功能的實(shí)現(xiàn)要求也是不一樣的，比如生產(chǎn)環(huán)境需要壓縮代碼，而開發(fā)環(huán)境需要sourceMap便于調(diào)試，而這兩種環(huán)境也有公共的配置??！

接下來在下面我會(huì)慢慢講述不同環(huán)境需要實(shí)現(xiàn)的功能

在build里面新建文件

• webpack.base.conf.js 公共配置文件
• webpack.dev.conf.js 開發(fā)環(huán)境配置文件
• webpack.prod.conf.js 生產(chǎn)環(huán)境配置文件

公共配置文件

webpack.base.conf.js 是公共配置文件，需要實(shí)現(xiàn)以下功能 :

• 字體處理
• 處理圖片以及優(yōu)化
• 識(shí)別Vue文件
• 啟用babel轉(zhuǎn)碼，把ES6轉(zhuǎn)換ES5代碼
• 音樂文件處理
• 配置打包后的html模板
• 配置resolve模塊解析

在 package.json 文件里面 scripts 配置運(yùn)行腳本命令 :

"test":"webpack --config build/webpack.base.conf.js"

在命令行上運(yùn)行 npm run test 即可運(yùn)行 webpack.base.conf.js 配置文件

開發(fā)環(huán)境配置文件

webpack.dev.conf.js 是開發(fā)環(huán)境配置文件，該環(huán)境注重調(diào)試效率：

• 打包處理css和less文件，設(shè)置sourceMap方便定位調(diào)試
• postcss-loader自動(dòng)添加前綴
• 配置devServer開啟熱更新功能

在 package.json 文件里面 scripts 配置運(yùn)行腳本命令 :

"dev":"cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

在命令行上運(yùn)行 npm run dev 即可運(yùn)行 webpack.dev.conf.js 配置文件

生產(chǎn)環(huán)境配置文件

webpack.prod.conf.js 是生產(chǎn)環(huán)境配置文件，該環(huán)境注重壓縮代碼和性能：

• 打包處理css和less文件
• mini-css-extract-plugin抽離樣式為單獨(dú)css文件
• postcss-loader自動(dòng)添加前綴
• clean-webpack-plugin每次打包清理創(chuàng)建的dist文件夾
• optimize-css-assets-webpack-plugin壓縮css文件代碼
• terser-webpack-plugin壓縮JS文件代碼

在 package.json 文件里面 scripts 配置運(yùn)行腳本命令 :

"build":"cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"

在命令行上運(yùn)行 npm run build 即可運(yùn)行 webpack.prod.conf.js 配置文件

三、搭建公共配置文件功能

上面把三個(gè)配置文件需要實(shí)現(xiàn)的功能都列舉出來了，現(xiàn)在只要按著功能去搭建、去配置就好了，好了，開始?。?/p>

在 webpack.base.conf.js 里面開始公共配置功能

配置處理字體、圖片、音樂功能

處理字體、圖片和音樂需要安裝相關(guān)依賴

npm i url-loader file-loader --save-dev

配置代碼如下

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, '../src/main.js'),
  output: {
    filename: 'js/[name].[hash:5].js',
    path: path.resolve(__dirname, '../dist'),
    publicPath: './'
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [{
            loader: 'url-loader',
            options: {
              limit: 10000,
              name: 'img/[name]-[hash:5].[ext]',
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name]-[hash:5].[ext]',
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              name: 'media/[name]-[hash:5].[ext]',
            }
          }
        ]
      }
    ]
  },
}

url-loader 和 file-loader 功能相似，都是在webpack中處理圖片、字體圖標(biāo)等文件

它們之間的關(guān)系是 url-loader 封裝了 file-loader ，但 url-loader 并不依賴于file-loader

url-loader 可以通過limit屬性對(duì)圖片分情況處理，當(dāng)圖片小于limit（單位：byte）大小時(shí)轉(zhuǎn)base64，大于limit時(shí)調(diào)用 file-loader 對(duì)圖片進(jìn)行處理。

ES6轉(zhuǎn)換ES5代碼

在這里我吐一下苦水，在學(xué)習(xí)使用babel配置ES6轉(zhuǎn)換代碼的時(shí)候，真的費(fèi)了很大的心思，配置了很久，很多l(xiāng)oader我都搞不清楚是什么關(guān)系（捂臉）,后來看了官網(wǎng)和別人的博客才分清楚了~~~好了，開始！！

首先要安裝相關(guān)loader

npm i babel-loader @babel/core @babel/polyfill @babel/preset-env core-js@3 --save-dev

• babel-loader只支持ES6語法轉(zhuǎn)換，但是不支持ES6新增加的API
• babel-polyfill可以添加ES6新增加API，讓客戶端支持
• babel-preset-env可以配置讓JS兼容的運(yùn)行環(huán)境
• babel-core把js 代碼分析成 ast ，方便各個(gè)插件分析語法進(jìn)行相應(yīng)的處理

看配置代碼

這樣子配置只支持ES6語法轉(zhuǎn)換，不支持ES6新增加API

在入口文件 main.js 里面添加 import @babel/polyfill

這樣子就可以使用ES6新增加的API了，但是這是你會(huì)發(fā)現(xiàn)打包后的JS文件比較大，而且里面有很多ES6的API也是你沒用到的，所以這時(shí)候你需要做到按需引入

在根目錄下創(chuàng)建 babel.config.js 文件，在里面設(shè)置配置

好了，這樣就可以實(shí)現(xiàn)按需引入了，可以大大減少打包后的JS文件大小了，嗯嗯，我也終于把知識(shí)點(diǎn)整理出來了（捂臉）（辛酸臉）~~~

配置打包Vue文件

首先先安裝依賴

npm i vue vue-loader vue-template-compiler --save-dev

在 src 文件夾上新建Vue文件 App.vue

在 main.js 入口文件上引入Vue并且掛載到節(jié)點(diǎn)上

好了，開始打包Vue文件的配置

這樣就好了，感覺打包Vue以及掛載節(jié)點(diǎn)這段代碼手敲出來還是挺有感覺的

配置html模板頁面

安裝依賴

npm i html-webpack-plugin --save-dev

使用 html-webpack-plugin來創(chuàng)建html頁面，并自動(dòng)引入打包生成的文件

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'../index.html'),
      filename: 'index.html'
    }),
  ]

具體配置可以查看npm文檔

https://www.npmjs.com/package/html

配置resolve模塊解析

配置alias方便路徑的檢索效率以及配置文件默認(rèn)擴(kuò)展名

 resolve: {
    extensions: ['.js','.json','.vue'],
    alias: {
      '@': path.resolve(__dirname,'../src')
    }
  }

"@":"指向src文件夾"

好了，到這里為止，已經(jīng)完成了配置文件的公共部分了，接下來開始針對(duì)環(huán)境進(jìn)行配置了?。?！

在命令行上運(yùn)行 npm run test ，可以運(yùn)行公共配置文件

四、生產(chǎn)環(huán)境配置

好了，直接開敲！??！

在 webpack.prod.conf.js 文件里面進(jìn)行配置

定義環(huán)境變量

webpack里面提供了 DefinePlugin 插件可以方便定義環(huán)境變量

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
  ],

處理css和less文件

生產(chǎn)環(huán)境處理css和less文件需要把css樣式提取出來到一個(gè)獨(dú)立的css文件里面

并且自動(dòng)添加前綴，sourceMap

處理css和less文件

npm i css-loader less less-loader --save-dev

自動(dòng)添加前綴

npm i postcss-loader autoprefixer --save-dev

提取css樣式到獨(dú)立css文件

npm i mini-css-extract-plugin --save-dev

篇幅過長(zhǎng)，無法截圖，直接上代碼

const webpackConfig = require('./webpack.base.conf');
const merge = require('webpack-merge');
const webpack = require('webpack');
//抽離CSS樣式
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(webpackConfig,{
  mode: 'production',
  devtool: 'cheap-source-map',
  module: {
    rules: [
      {
        test: /\.(c|le)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: loader=>[
                require('autoprefixer')({
                  browsers: [
                    "last 2 versions",
                    "> 1%"
                  ]
                })
              ]
            }
          },
          {
            loader: 'less-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name]-[hash:5].css',
      chunkFilename: 'css/[id]-[hash:5].css',
    }),
  ],
}

清理打包創(chuàng)建文件夾

打包過程中你會(huì)發(fā)現(xiàn)每次打包后dist文件夾都會(huì)不斷增加文件, 顯然這個(gè)方面我們需要處理

安裝相關(guān)依賴

npm i clean-webpack-plugin --save-dev

//清理dist
const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
  new CleanWebpackPlugin(),
],

壓縮js和css代碼

壓縮css代碼

npm i optimize-css-assets-webpack-plugin --save-dev

壓縮js代碼

npm i terser-webpack-plugin --save-dev

使用方式

 optimization: {
    minimizer: [
      //壓縮css
      new OptimizeCssAssetsWebpackPlugin({}),
      // 壓縮JS
      new TerserWebpackPlugin({
        cache: true,
        parallel: true,
        sourceMap: true,
      }),
      //具體更多配置可以查看官網(wǎng)
    ]
  }

在命令行上運(yùn)行 npm run build 可以運(yùn)行開發(fā)環(huán)境配置文件

好了，說完開發(fā)環(huán)境的配置，接下來到生產(chǎn)環(huán)境的配置了

五、開發(fā)環(huán)境配置

在 webpack.dev.conf.js 文件里面進(jìn)行配置

有點(diǎn)小累（捂臉）

定義環(huán)境變量

跟生產(chǎn)環(huán)境一樣，首先也是要定義環(huán)境變量

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('development')
  }
}),

處理css和less文件

開發(fā)環(huán)境下的css和less不需要提取樣式，只需要添加前綴和sourceMap方便調(diào)試

安裝依賴

處理css和less文件

npm i style-loader css-loader less less-loader --save-dev

自動(dòng)添加前綴

npm i postcss-loader autoprefixer --save-dev

const webpackConfig = require('./webpack.base.conf.js');
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');

module.exports = merge(webpackConfig,{
  mode: 'development',
  // source-map,將編譯后的代碼映射到原代碼，便于報(bào)錯(cuò)后定位錯(cuò)誤
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(c|le)ss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: loader=>[
                require('autoprefixer')({
                  browsers: [
                    "last 2 versions",
                    "> 1%"
                  ]
                })
              ]
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
}

配置devServer

webpack上可以開啟熱更新模式，大大加速開大效率。

安裝相關(guān)依賴

npm i webpack-dev-server --save-dev

上代碼

  //具體更多配置可以參考官網(wǎng)
  devServer: {
    contentBase: path.resolve(__dirname,'../dist'),
    // hot: true,
    port: 9090,
    overlay: {
      warnings: true,
      errors: true
    },
    publicPath: '/'
  }
  
  plugins: [
    // 啟用模塊熱替換(HMR)
    new webpack.HotModuleReplacementPlugin(),
    // 當(dāng)開啟 HMR 的時(shí)候使用該插件會(huì)顯示模塊的相對(duì)路徑，建議用于開發(fā)環(huán)境。
    new webpack.NamedModulesPlugin(),
  ],

這樣子就可以在線調(diào)試，無需手動(dòng)刷新了??！嘻嘻

好了，開發(fā)環(huán)境的配置也完成了

在命令行上輸入 npm run dev 可以運(yùn)行生產(chǎn)環(huán)境配置文件

六、總結(jié)

整個(gè)Vue開發(fā)環(huán)境配置下來，感覺學(xué)到的東西還是挺多的，對(duì)webpack4功能的配置也有了大致的認(rèn)識(shí)

雖然跟Vue-cli相比還是差太遠(yuǎn)，但是有時(shí)候弄點(diǎn)小東西折騰一下感覺還是不錯(cuò)的！！

好了，本編文章就到此為止，由于本人水平有限，如果有什么錯(cuò)誤，請(qǐng)及時(shí)指出，彼此好好進(jìn)步，哈哈?。≈x謝各位大佬（笑臉）

下篇文章我將用這次搭建的Vue開發(fā)環(huán)境去編寫 todoList 項(xiàng)目

我相信大家對(duì)todoList并不陌生，但是同一個(gè)項(xiàng)目可以有不同的寫法的，所以下篇文章我也會(huì)繼續(xù)手動(dòng)搭建Vue文件夾，純手寫，用 vue-router . vuex 來實(shí)現(xiàn)，相信會(huì)對(duì)大家有幫助，好了，結(jié)束?。?/p>

github源碼：https://github.com/Zero-jian/webpack

下篇文章 手動(dòng)搭建Vue項(xiàng)目 ，未完待續(xù)~~~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論