如何優雅的自配Vue2.6.10+webpack4.29.6？

     webpack4與vue2.6已經出來一段時間了，忙於業務一直沒有時間作升級，cli又不能知足業務上的需求，決定拋棄腳手架手擼一個最新的基於vue的webpack項目。

1.首先先建立一個文件夾，輸入命令

npm init
複製代碼

二、下載webpack4 與 webpack CLI

一系列操做以後，package包出現了，咱們先下載關於webpack的依賴包，輸入指令。

npm i webpack webpack-cli webpack-dev-server -D
複製代碼

三、下載vue、vue-route、vuex

npm i vue vue-router vuex //生產依賴
npm i vue-template-compiler vue-loader vue-style-loader -D //開發依賴
複製代碼

四、配置關於vue的文件

五、建立webpack.config.js並配置package腳本

首先咱們在根目錄建立webpack.config.js

module.exports = {
  entry: 'main.js', // 入口文件，也就是打包這個js文件
  output: {  // 打包的文件位置
    filename: 'bundle.[hash:8].js', //當js文件更改， [hash]的值會變化，每次build會生成一個新的js文件，[hash:8]，只顯示8位的hash值，打包出來固然文件名叫 bundle.js
    path: path.resolve(__dirname, 'jycloud'), //resolve() 能夠把相對路徑解析成絕對路徑， __dirname 是當前目錄，路徑必須是一個絕對路徑，相對於根目錄
  }
}
複製代碼

爲了方便操做咱們先配置webpack腳本

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server",
    "start": "npm run dev"
  }
複製代碼

六、配置webpack服務

devServer: { // 開發服務器的配置
    port: 3000,
    progress: true, // 編譯的進度條
    contentBase: path.join(__dirname, 'static'), // 以static目錄爲默認啓動目錄
    compress: true, // 自動壓縮
    open: true,// 自動打開瀏覽器
  }
複製代碼

七、配置html。

前期工做鋪墊好了，咱們先開始配置html，先下載

npm i html-webpack-plugin  -D
複製代碼

而後咱們進行webpack.config.js的配置。

const HtmlWebpackPlugin = require('html-webpack-plugin')//html分離
複製代碼

plugins: [  // 數組,放着全部的webpack插件
    new HtmlWebpackPlugin({
      template: 'index.html', // 注意路徑爲根目錄下的路徑
      filename: 'index.html', // 打包後也叫作 index.html
      minify: {     // 壓縮這個html文件(主要是對HTML文件進行壓縮)
        removeAttributeQuotes: true,        // 刪除這個html文件的雙引號
        collapseWhitespace: true      // 變成一行
      },
      hash: true
    })
]
複製代碼

八、配置css。

npm i style-loader css-loader less less-loader postcss-loader autoprefixer -D
npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin  -D
複製代碼

而後咱們進行webpack.config.js的配置。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')//這個插件的主要做用是實現css分離
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')// 這個插件做用是對單獨抽離出來的css文件進行壓縮。
複製代碼

module: { // 模塊loader 默認是從右到左，從下到上執行,多個loader須要一個數組，loader是有順序的，默認是從右向左執行，loader還能夠寫成 對象方式
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 把樣式都抽離成一個單獨的css文件
          "css-loader",
          "postcss-loader"//給CSS3語法，好比transfrom加上前綴， 須要新建 postcss.config.js 配置文件，須要引用 autoprefixer 這個插件
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import這種語法的
          'postcss-loader',
          'less-loader' // 把less轉變爲css
        ]
      }
    ]
  }
複製代碼

plugins: [  // 數組,放着全部的webpack插件
  new MiniCssExtractPlugin({
    filename: 'jycloud.css'
  }),
  new OptimizeCSSAssetsPlugin({
    cssProcessor: require('cssnano'), //引入cssnano配置壓縮選項
    cssProcessorOptions: {
      discardComments: { removeAll: true }
    },
    canPrint: true//是否將插件信息打印到控制檯
  })
]
複製代碼

postcss.config.js配置

module.exports = {
plugins: [require('autoprefixer')]//  // 須要用到 autoprefixer插件
}
複製代碼

九、配置圖片

npm i url-loader file-loader -D
npm i html-withimg-loader -D //處理html填入圖片
複製代碼

而後咱們進行webpack.config.js的配置。

module: { 
    rules: [
      {
        test: /\.html$/,    // 找到html文件
        use: 'html-withimg-loader'//解決html引入圖片打包的問題
      },
      {
        test: /\.(png|jpg|gif)$/,       // 找到全部的圖片
        use: {// 作一個限制，當咱們的圖片，小於多少k的時候，用base64來轉化，不然用file-loader產生真實的圖片
          loader: 'url-loader',
          options: {
            limit: 200 * 1024   // 小於200k，會轉化成base64
          }
        }
      },
     ]
  }
複製代碼

十、配置js

npm i @babel/core @babel/preset-env @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D
複製代碼

而後咱們進行webpack.config.js的配置。

module: { 
    rules: [
      {
        test: /\.js$/,  // 找到全部的js文件
        use: {
          loader: 'babel-loader', // 用babel-loader，須要把ES6轉換成ES5語法
          options: {
            presets: [ // babel的集合
             '@babel/preset-env'    // @babel/preset-env 就是用來將ES6轉化成ES5語法的
            ],
            plugins: [
              ['@babel/plugin-proposal-decorators', {'legacy': true}],   // 將ES7語法中的類裝飾器轉換成ES5語法， legacy 是寬鬆模式
              ['@babel/plugin-proposal-class-properties', {'loose': true}],  // 將ES7語法中的類轉換成ES5語法
              '@babel/plugin-transform-runtime'//避免編譯出現重複
            ]
          }
        },
        include: path.resolve(__dirname, 'src'),// 只查找src目錄下的js，不找node_modules裏面的js
      },
     ]
  }
複製代碼

十一、配置vue

const VueLoaderPlugin = require('vue-loader/lib/plugin');//VueLoaderPlugin,注意路徑必定是('vue-loader/lib/plugin')，而不是('vue-loader')，否則會報錯
複製代碼

module: { 
    rules: [
    {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
     ]
}
複製代碼

plugins: [
    new VueLoaderPlugin()
]
複製代碼

十二、webpack.config.js單獨放入文件夾。

目前的webpack.config.js在根目錄

爲了美觀，咱們把它放到單獨的文件夾中

這樣咱們的路徑須要發生變化，先配置腳本

再配置出入口

1三、webpack.config.js總結構

結語

零零散散的時間配置了這個webpack，總算是大功告成。可能還有許多不足，歡迎指正。

微信公衆號：麥坤小子。

github：github.com/Wpfsxauer/w…