關於使用vue開發webpack.config.js配置問題。

最近學習vue,並想用vue開發項目，既然如此確定拋不開webpack的使用，雖然vue已經提供了vue-cli腳手架，可是不妨本身配置一下，加深理解，本文發佈主要方便本身記憶。只有寫下了的才能更好記憶。 首先，安裝webpack，我的建議全局安裝,固然電腦中必須安裝過node

npm i webpack --global //然而webpack4出來後，這樣安裝的webpack使用起來會報錯，會叫你安裝webpack-cli
  //這是由於webpack4版本的相關命令都在webpack-cli中，能夠這樣使用
  npm i webpack-cli --global  //安裝,注意的是，若是本地安裝webpack-cli，使用的時候，要進入webpack目錄下
複製代碼

這個時候已是可使用webpack4進行打包了，可是如今只能夠打包js文件。webpack4對打包命令有更加嚴格的要求，以前的命令webpack main.js bundle.js也是不可用的。

npx webpack main.js -o bundle.js --mode development
複製代碼

這裏不對webpack進行更多介紹，顯然上面的命令是很麻煩的 首先能夠配置package.json文件中scripts配置添加"build","webpack",算是約定俗成的規範，以後打包編譯能夠經過運行npm run build進行編譯，固然如今還不可用。說了這麼多終於到webpack.config.js的配置了。 在根目錄創文文件webpack.config.js。添加以下代碼：

const path = require('path')  根目錄路徑
module.exports = {
 entry:'./src/index.js',   //打包的入口文件
 output:{
   path:path.resolve(__dirname,'dist'),    //出口文件路徑
   filename:'bundle.js'                    //出口文件名字
 },
  mode:'development'                     //環境爲開發環境
}
複製代碼

這時能夠執行npm run build命令進行打包了，固然只能打包js文件，可實際開發不可能只用js，那麼css和圖片怎麼進行打包呢，這要藉助於加載器插件了，也就是loader

npm i css-loader style-loader file-loader --save-dev
複製代碼

webpack.config.js中進行以下配置：

module: {
   rules: [
     {
       test: /.css$/,
       use: [
         // 注意：順序上不能改動
         'style-loader',
         'css-loader'
       ]
     }，
    {
       test:/.(jpg|png|jpeg|svg|gif)$/,
       use:[
         "file-loader"
       ]
    } 
   ]
 }
複製代碼

這樣就能夠對圖片和css進行打包了，注意：圖片打包，會造成新的路徑，因此打包後的index.html是找不到圖片的。這時候咱們要把index.html文件也一樣打包進去。

npm i html-webpack-plugin --save-dev //打包html用的插件
複製代碼

固然webpack.config.js要加入plugin配置

plugins: [
// 該插件的所用就是把 index.html 打包到你的 bundle.js 文件所屬目錄
new htmlWebpackPlugin({
  template: './index.html'
})
]
複製代碼

如今路徑問題也解決了，接下來讓咱們讓webpack能夠支持.vue文件,步驟比較相似

npm i vue-loader vue-templete-compiler
複製代碼

webpack.config.js中加入

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

.vue文件也能夠打包了。在這裏基本的webpack.config.js打包的配置已經完成了，不過爲了方便開發，而且更多的兼容。實際開發中咱們還要用到babel編譯，

npm install --save-dev babel-loader babel-core babel-preset-env
複製代碼

webpack.config.js中添加

{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/, // 不轉換 node_modules 中的文件模塊
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
          cacheDirectory:true,//緩存編譯，能夠增長編譯速度
        }
      }
    }
複製代碼

babel值轉換語法，API的轉換，咱們要用babel-polyfill

npm i --save-dev babel-polyfill

複製代碼

配置上要改變webpack.config.js中的entry

entry: ['babel-polyfill', './src/main.js']
複製代碼

babel會給沒給模塊添加工具函數。這樣會形成代碼的重複，因此經過babel-transform-runtime解決

npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
複製代碼

webpack.config.js中配置

{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env'],
           // 默認把打包的結果緩存到 node_modules/.cache 模板
          cacheDirectory: true,
          plugins: ['transform-runtime'] //加上這一行
        }
      }
    }
複製代碼

爲了方便開發，咱們還能夠引入插件webpack-dev-server

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

配置根目錄

devServer: {
  // 配置 webpack-dev-server 的 www 目錄
  contentBase: './dist'
},
複製代碼

配置npm script

"scripts": {
  "build": "webpack",
  "watch-build": "webpack --watch",
  "dev": "webpack-dev-server --open"
},
複製代碼

接下來就能夠經過

npm run dev
複製代碼

來啓動項目了。不過如今還作不到熱更新，若是想熱更新只需在webpack.config.js配置中添加

const webpack = require('webpack')
//配置中加入下面兩個對象
plugins:[
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
]
//並設置熱更新爲true
devServer:[
  hot:true
]
複製代碼

補充一點，有些外部引用的代碼實際上並不須要打包，以jquery爲例：

externals:[
 //key 就是包名
 //value是全局的接口
   jquery:'jQuery'
 ]
複製代碼

這樣就能夠過濾掉jquery。

最後補上完整的配置代碼

const path = require('path')
const HtmlWebpackPlugin =  require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry:['babel-polyfill','./src/index.js'],
output:{
  path:path.resolve(__dirname,'dist'),
  filename:'bundle.js'
},
mode:'development',
//第三方資源不進行打包
externals:[
//key 就是包名
//value是全局的接口
   // jquery:'jQuery'
],
module:{
    rules:[
        {
          test:/\.css$/,
          use:[
              'style-loader',
              'css-loader'
          ]
        },
        {
          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
          }
        ]
      },
      {
        test:/\.(jpg|png|jpeg|svg|gif)$/,
        use:[{
          loader:"file-loader"
        }]
      },
       {
        test: /\.js$/,
         exclude: /(node_modules|bower_components)/,
          use: {
              loader: 'babel-loader',
          options: {
            cacheDirectory:true,
            presets: ['env'],
            plugins:['transform-runtime']
         }
        }
      },
      {
        test:/\.vue$/,
        use:[
          'vue-loader'
        ]
      }
  ]
},
plugins:[
//打包後圖片路徑改變，須要打包html
   new HtmlWebpackPlugin(),
//熱更新
   new webpack.NamedModulesPlugin(),
   new webpack.HotModuleReplacementPlugin()
],
devServer:{
  // 配置webpack-dev-server的www目錄
  contentBase: './',
//熱更新
  hot:true
}
}
複製代碼