初始化一些檔案和依賴

新建一個testwebpack的資料夾。
然後在該資料夾下：

npm init

這時候會出現一個pack.json檔案。

npm i webpack vue vue-loader

這時候警告如下：
npm WARN [email protected] requires a peer of [email protected]* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of

需要安裝css-loader 和vue-template-compiler。

npm i css-loader vue-template-compiler

新建資料夾：

• src > app.vue(根檔案)

<template>
  <div id="app">
    {{text}}
  </div>
</template>

<script
 
>
export default {
  name: 'App',
  data () {
    return {
      text: 'this is test'
    }
  }
}
</script>

<style scoped>
  #app {
    color: red;
  }
</style>

• src > index.js (主入口)

import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div'
 
)
document.body.appendChild(root)

new Vue({
  render: (h) => h(App)
}).$mount(root)

新建webpack.config.js

const path = require('path')

module.exports = {
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}

package.js > script下新增程式碼如下：
因為只有在這裡配置了，才能執行內部的webpack

"build": "webpack --config webpack.config.js"

此時在埠執行npm run build

提示如下：
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages
webpack4需要依賴webpack-cli

webpack-cli

安裝好之後報錯如下：

1、The ‘mode’ option has not been set,
webpack4裡面需要宣告mode來判斷是生產環境還是開發環境
詳見官網：https://webpack.js.org/concepts/mode/
修改build：

"build": "webpack --mode=production --config webpack.config.js"

2、You may need an appropriate loader to handle this file type.
這個報錯說明需要配置loader
配置必要的loader：

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },

此時繼續npm run build
報錯如下：

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

提示webpack4配置需要包含VueLoaderPlugin

const VueLoaderPlugin = require('vue-loader/lib/plugin')

然後在輸出裡面配置plugins：

plugins: [
    new VueLoaderPlugin()
]

此時發現還有報錯，原因很簡單，沒有安裝style-loader.

npm i style-loader

這時候就可以正常的 run build 了。

配置圖片資源的打包、css前處理器等

新建檔案src>assets>image&&src>assets>styles

然後配置loader：

,
      {
        test: /\.(jpg|jpeg|svg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 1024,
            filename: '[name].[ext]'
          }
        }
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }

安裝loader：

npm i stylus stylus-loader url-loader file-loader

此時，就基本完成基本配置了。

devServer的使用

package.js倆面的script配置如下：

"dev": "webpack-dev-server --mode=development --config webpack.config.js"

webpack.config.js裡面進行一些判斷，確定是生產環境還是開發環境：
如何判斷呢？安裝一個cross-env 的包

 npm i cross-env

修改package.js內容如下：

"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js"

然後在weback.config.js定義一個變數：

const isDev = process.env.NODE_ENV === 'development'

如果這個變數為真，則做如下操作：

if (isDev) {
  config.devtool = '#cheap-module-eval-source-map',
  config.devServer = {
    port: 8000,
    host: '0.0.0.0',
    overlay: {
      errors: true
    //熱載入
    hot: true
  },
  //下面是不重新整理更新內容
  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),,
    new webpack.NoEmitOnErrorsPlugin()
  )
}

這時候還需要一個html來展示，

const HTMLPlugin = require('html-webpack-plugin')

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new VueLoaderPlugin(),
    new HTMLPlugin()
  ],

到這裡，基本配置就已經完成了。

postCss、babel-loader使用

npm i postcss autoprefixer babel-loader babel-core 

1. postcss: 後處理css的作用

aotuprefixer

const autoorefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer()
  ]
}

2.vue中使用jsx

npm i babel-env babel-plugin-transform-vue-jsx

rules新增如下：

{
        test: /\.jsx$/,
        loader: 'babel-loader'
      },

{
        test:/\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
            //選項的作用使用來提高效率的。
          },
          'stylus-loader'
        ]
      },

這裡我遇到一個坑，最後在官方文件找到了。

test:/\.styl$/,

使用上面的配置無法解析vue中的stylus，需要向下面這樣配置：

test:/\.styl(us)?$/,

這樣就可以了。

正式打包的時候，如何分離css檔案

npm install --save-dev extract-text-webpack-plugin

webpack4升級後，使用這個會有很多坑，如下：

開發環境的rules不變：

if (isDev) {
  config.module.rules.push(
    {
      test: /\.styl(us)?$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true,
          }
        },
        'stylus-loader'
      ]
    }
  )
  // 開發環境就這樣就可以了

如果是生產環境：

else {
  config.output.filename = '[nams].[chunkhash:8].js'
  // 生產環境必須是chunkhash
  config.module.rules.push(
    {
      test: /\.styl(us)?$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            }
          },
          'stylus-loader'
        ]
      })
    }
  )
  config.plugins.push(
    // new ExtractTextPlugin("styles.[ontentHash:8].css")
    new ExtractTextPlugin('styles.[hash:8].css')
    // 根據內容得到hash值
  )
}

坑1：
webpack4不支援extract-text-webpack-plugin3.0版本，需要使用4.0-beat版本：

npm i extract-text-webpack-plugin@next

坑2：

config.plugins.push(
    // new ExtractTextPlugin("styles.[ontentHash:8].css")
    new ExtractTextPlugin('styles.[hash:8].css')
    // 根據內容得到hash值
  )

這裡不能使用style.[contentHash:8].css

到這裡最終編譯成功~

單獨打包vue程式碼

config.entry = {
    app: path.join(__dirname, 'src/index.js'),
    vendor: ['vue']
  }

config.optimization = {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5,
          minSize: 0
        },
        vendor: {
          test: /node_modules/,
          chunks: 'initial',
          name: 'vendor',
          priority: 10,
          enforce: true
        }
      }
    },
    runtimeChunk: true
  }