webpack+vue學習一：配置webpack（分離開發和生產環境），並實現vue頁面輸出

前言

webpack的應用很普遍，就算不深刻使用，仍是須要了解一番的。
本文並無詳細描述每一步的安裝組件步驟和一些概念等，由於webpack官網已經寫得很詳細了，網上學習webpack的文檔也有不少，可是我在學習的過程當中，沒有找到vue和webpack結合來說的文檔，而且學習配置中也遇到了不少問題，所以，本文旨在記錄完整的配置，以及遇到的一些bug

學習資料

webpack 官網：www.webpackjs.com/
vue 官網： cn.vuejs.org/

安裝webpack，並初始化

一、安裝webpack步驟以下（已經有安裝node.js）：

npm install --save-dev webpack // 安裝最新的webpack
npm install --save-dev webpack-cli // 安裝webpack-cli
npm init // 初始化項目
複製代碼

初始化項目的時候，根據提問本身選擇相應的選項，在初始化結束以後，項目裏會有 package.json 文件

這個文件記錄了項目的配置信息。

二、新建文件 webpack.common.js 、webpack.dev.js、webpack.prod.js（名稱可改）

默認的webpack配置文件名稱爲 webpack.config.js ,但通常都會進行環境分離，因此刪除 webpack.config.js,新建如下三個文件，分別爲公用環境、開發環境、生產環境

三、package.json修改

在package.json中添加指定的運行指令，並使用set NODE_ENV= 爲當前環境設置別名，須要注意的是，set NODE_ENV=XXName 的 XXName先後不能有空格，否則空格會包含到當前環境名稱中

"scripts": {
    "build": "set NODE_ENV=production&& webpack --config webpack.prod.js", // 設置生產環境運行指令爲 npm build,生產環境名稱爲production,生產環境配置文件爲webpack.prod.js（下同）
    "start": "set NODE_ENV=development&& webpack-dev-server --open --config webpack.dev.js"
},
複製代碼

四、其餘文件

• index.html ，瀏覽器運行須要的頁面
• src 文件夾，存放相關代碼
• src/main.js 項目的入口文件
• src/assets 相關的圖片等資源存放
• src/common js方法
• src/page 相關代碼頁
• App.vue vue頁面主頁
• static 項目靜態資源文件夾 頁面的佈局能夠參考vue-Cli，也能夠根據本身的習慣配置

項目目錄

（劃掉的文件能夠先不用去配置）

完整配置

一、webpack.common.js中配置以下

const path = require('path'); // 定義當前路徑
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 添加vue-loader
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取獨立的css文件
module.exports = {
  entry: {
    app: './src/main.js', // 入口文件
  },
  // 路徑別名--在vue文件中，能夠直接使用@或static縮寫路徑
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      static: path.resolve(__dirname, 'static')
    }
  },
  // 引入插件
  plugins: [
    new VueLoaderPlugin(), // 引入vue-loader
    new MiniCssExtractPlugin({
      filename: 'static/style/style.css'
    }),
  ],
  // bundle輸出，這裏也能夠分開寫在開發環境和生產環境中
  output: {
    filename: process.env.NODE_ENV === 'production' ? 'static/js/[name].[chunkhash].js' : 'static/js/[name].[hash].js', // chunkhash不可與熱更新一塊兒使用，開發環境使用了熱更新，因此須要區分開發和生產環境
    chunkFilename: '[name].bundle.js', // 決定非入口 chunk 的名稱
    path: path.resolve(__dirname, 'dist'),
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/' 
  },
  // 規則配置
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它會應用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 塊
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ],
        // 排除node_modules內的轉譯
        exclude: file => (
          /node_modules/.test(file) && !/\.vue\.js/.test(file)
        )
      },
      {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            {
                loader: 'file-loader',
                options: {
                    limit: 10240,
                    name:"static/imgs/[name].[ext]", // 輸出的文件名
                    esModule: false
                }
            }
          ],
      },
      {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            {
                loader: 'file-loader',
                options: {
                  limit: 10240,
                  name:"static/fonts/[name].[ext]",
                  esModule: false
              }
            }
          ]
      },
      // 提取css
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
          test: /\.less$/,
          use: [
            process.env.NODE_ENV !== 'production'
              ? 'vue-style-loader'
              : MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader',
          ]
      },
    ]
  },
};
複製代碼

二、webpack.dev.js中配置以下

// 合併配置文件
const merge = require('webpack-merge')
const common = require('./webpack.common.js')

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

module.exports = merge(common, {
  devtool: 'inline-source-map', // 輸出報錯
  // 熱更新
  devServer: {
    hot: true,
    contentBase: './src/main.js',
    host: 'localhost'
  },
  plugins: [
    //瀏覽器預覽頁面
    new HtmlWebpackPlugin({
      title: 'development',
      filename: 'index.html',
      template: 'index.html'
    }),
    new webpack.NamedModulesPlugin(), // 查看要修補(patch)的依賴-查看更改的文件
    new webpack.HotModuleReplacementPlugin()
  ],
})
複製代碼

三、webpack.prod.js中配置以下

// 生產環境
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin'); // 壓縮js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成瀏覽器預覽頁面
module.exports = merge(common, {
    devtool: 'source-map', // 生產環境的報錯信息
    mode: 'production', // 壓縮輸出
    plugins: [
        // 清空dist文件裏的內容
        new CleanWebpackPlugin(),
        // 提供生成的index.html模板
        new HtmlWebpackPlugin({
            title: 'productionPage',
            template: 'index.html',
        }),
    ],
    optimization: {
        // 壓縮js
        minimize: true,
        minimizer: [
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
            })
        ],
        // 分離壓縮代碼-此分離了vue的源碼，項目代碼單獨生成一個js文件
        splitChunks: {
            cacheGroups: {
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                name: 'static/js/vendors',
                chunks: 'initial'
              }
            }
        }
    },
});
複製代碼

其餘頁面配置

• .babelrc es6代碼解析文件

{
    "presets": [
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }]
    ],
    "plugins":[]
}
複製代碼

• main.js 入口文件

import Vue from 'vue'
import App from './App.vue'

export const vue = new Vue({
  render: (h) => h(App)
}).$mount('#app')
複製代碼

• App.vue 至此配置完後,就能夠按照正常的vue頁面寫法寫vue項目了

<template>
    <div id="app" class="container">
        <img src="./assets/img/page.png">
        <img :src="imgs" alt="">
        <img :src="imgs2" alt="">
        <p class="p-test">{{ greeting }} world!ddd!!</p>
        <home></home>
    </div>
</template>
<script>
import imgs from '@/assets/img/page.png'
import imgs2 from 'static/img/finger.png'
import home from '@/pages/home'
export default {
    name: 'App',
    components: { home },
    props: {},
    data() {
        return {
            imgs: imgs,
            imgs2: imgs2,
            greeting: "Hello",
        };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {},
    methods: {},
}
</script>
<style lang="less">
@import 'static/style/common.less';
.container{ 
    .p-test{
        color: red
    }
}
</style>

複製代碼

以上配置須要安裝的插件以下：

npm install --save lodash // 用於打包 lodash 依賴
npm install --save-dev style-loader css-loader // 加載CSS
npm install --save-dev file-loader // 加載圖片、字體等
npm install --save-dev html-webpack-plugin // 每次打包生成一個HTML文件，將全部的 bundle 自動添加到 html 中
npm install clean-webpack-plugin --save-dev // 清理dist文件夾
npm install --save-dev webpack-dev-server // 代碼發生變化後自動編譯代碼
npm install --save webpack-merge // 分離代碼，區分生產環境和開發環境
npm install --save uglifyjs-webpack-plugin // 壓縮打包代碼 ---  沒法識別es6語法
npm install --save terser-webpack-plugin // 壓縮打包代碼 --- 替換uglifyjs
npm install --save-dev @babel/plugin-syntax-dynamic-import // 分離代碼所用到的
npm install -D mini-css-extract-plugin // css提取

// 安裝vue
npm install vue
npm install -D vue-loader vue-template-compiler // 安裝vue-loader和vue-template-compiler
npm install -D sass-loader node-sass //編譯<style>標籤
npm install -D less less-loader //編譯<style>標籤(選擇須要的)

// es6預處理器
npm install es6-promise // 處理es6
npm install -D babel-core
npm install babel-loader@7.1.5 // 須要和babel-core版本匹配
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
複製代碼

問題解決

一、babel-loader版本不匹配報錯

解決方法之一：版本不匹配，babel-loader 8 須要的是 // 7 的版本

npm install babel-loader@7.1.5
複製代碼

二、.babelrc文件爲空報錯

解決方法：.babelrc文件不能爲空，刪除或進行配置

三、.babelrc內部設置報錯

解決方法：

npm install babel-preset-env --save-dev //.babelrc設置了env選項，選裝相應的插件
複製代碼

四、由於css-loader和style-loader順序問題報錯

解決方法：先寫style-loader再寫css-loader（webpack從後往前解析，須要先找到css文件，再去識別添加style標籤）

五、chunkhash不可與熱更新一塊兒使用

解決方法（之一）：分離開發環境和生產環境，並根據環境進行判斷

總結

至此，項目可使用 npm run build進行打包項目，npm start運行項目了。vue的路由配置還在學習中，等待更新下一篇學習二的文檔。共勉