優雅配置vue項目，webpack 4.x + Vue模仿vue-cli配置 (一)

此配置爲本身動手的webpack 4.x簡單配置，高手繞過，入門者共同窗習！不懂處可自行百度或者留言

webpack中文官網

坑：全局webpack版本爲3.x, 而項目爲4.x

建議安裝項目局部的webpack版本

npm i -D webpack webpack-cli

初始化 package.json

npm init -y 或 npm init

生成一下package.json文件

{
  "name": "demo_03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

複製代碼

第一步 設置package.json的編譯字段

通常來講有兩種 npm run dev 和 npm run build

webpack添加了兩個方便的點 --mode 和 --env.NODE_ENV

• mode 兩種方式
  • --mode development 開發模式，編譯後的js不壓縮
  • --mode production 生產模式，編譯後的js壓縮
• --env.NODE_DEV 設置環境模式
  • --env.NODE_ENV=development 設置環境爲development開發模式
  • --env.NODE_ENV=production 設置環境爲production生產模式

webpack     // 不設置mode的狀況下 打包出來的文件自動壓縮
webpack --mode development  // 設置mode爲開發模式，打包後的文件不被壓縮
webpack --mode production // 設置mode爲生成環境，打包後的文件壓縮
webpack --env.NODE_ENV=development 設置process.env.NODE_ENV爲開發環境
webpack --env.NODE_ENV=production 設置process.env.NODE_ENV爲生產環境
複製代碼

package.json中的script

"scripts": {
    "dev": "webpack --mode development --env.NODE_ENV=development",
    "build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
  },
複製代碼

在webpack.config.js中如何獲取呢?

const path = require('path');
module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'production' 根據此處判斷環境
  console.log('Production: ', env.production) // ture

  return {
    entry: './src/index.js',
    output: {
      filename: 'index.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
}
複製代碼

設置NODE_ENV環境也能夠借鑑如下網頁文章 webpack4.0 npm script 使用 --mode development 設置開發模式和生產模式

第二步 簡單啓動編譯vue項目文件

確定就安裝vue相關的vue的npm包 vue vue-loader

注意：控制檯會提醒安裝css-loader 和 vue-template-compiler 不要吝嗇，也一併安裝了吧

npm i -D vue vue-loader

在項目文件裏新建個webpack.config.js文件

代碼以下

const configFun = (env)=> {
    return {
        entry: path.join(__dirname, 'src/main.js'), 
        output: {
        	filename: 'index.js', 
        	path: path.resolve(__dirname, 'dist')
    	}
        module: {
            rules:[{
                test: /\.vue$/,
                loader:'vue-loader'
            }]
        }
    },
}
module.exports = (env)=> {
    let config = configFun(env)
    return config;
}
複製代碼

項目文件中新建src文件，在src文件中新建app.js和main.js 代碼以下：

//main.js
import Vue from 'vue'
import App from './app.vue'


let root = document.createElement('div');
document.body.appendChild(root);


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

// app.vue
<template>
    <div class="test">{{text}}</div>
</template>
<script>
    export default {
        data(){
            return {
                text:'hello webpack111!！！'
            }
        }
    }
</script>
<style>
    .text{
        color: #999;
    }
</style>
複製代碼

第三步添加其餘模塊的編譯

js的ES6化，css和圖片

npm i -D babel-core babel-loader babel-preset-es2015 style-loader url-loader file-loader

• 疑問一、若是不明白babel-core babel-loader babel-preset-es2015的區別和聯繫能夠點擊查看一下👇大神的文章

babel-loader、babel-core、babel-preset-env的區別和聯繫

• 疑問二、url-loader file-loader的關係

url-loader對未設置或者小於limit設置的圖片進行轉換，以base64的格式被img的src所使用；而對於大於limit byte的圖片用file-loader進行解析。

在webpack.config.js配置好module，代碼以下

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        },
        {
            test: /\.vue$/,
            loader:'vue-loader'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(gif|jpg|jpeg|svg)/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 1024,
                        name: '[name].[hash:6].[ext]'
                    }
                },
            ]
        }
    ]
},
複製代碼

在項目文件下新建.babelrc文件，代碼以下

{
  "presets": ["es2015"] 
}
複製代碼

es2015根據你下載的npm的babel-preset-es2015包不一樣來決定的； 若是是babel-preset-env，那就是"presets": ["env"]

第四步 生成html模塊

到如今爲止項目中沒有html文件，做爲前端項目最爲基本的，webpack爲咱們提供了html-webpack-plugin的包，能夠運用此包生成html文件

npm i -D html-webpack-plugin

在webpack.config.js文件中以下

const htmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new htmlWebpackPlugin()
]
複製代碼

html-webpack-plugin配置屬性

• title 生成html文件的標題
• filename 就是html文件的文件名，默認是index.html
• template 依照的模板 html ejs ejs
• inject inject有四個值： true body head false
  • true 默認值，script標籤位於html文件的 body 底部
  • body script標籤位於html文件的 body 底部
  • head script標籤位於html文件的 head中
  • false 不插入生成的js文件，這個幾乎不會用到的
• favicon 給你生成的html文件生成一個 favicon ,值是一個路徑
• minify 使用minify會對生成的html文件進行壓縮。默認是false
• cache 默認是true的，表示內容變化的時候生成一個新的文件。
• showErrors 當webpack報錯的時候，會把錯誤信息包裹再一個pre中，默認是true。
• chunks chunks主要用於多入口文件[name]
• excludeChunks 排除掉一些js
• xhtml 一個布爾值，默認值是 false ，若是爲 true ,則以兼容 xhtml 的模式引用文件。
• chunksSortMode script的順序，默認四個選項： none auto dependency {function}

在此不作html-webpack-plugin過多的講解，推薦一篇文章查看

第五步 webpack-dev-server

webpack-dev-server用於開發者在開發中配置使用的

webpack官網有詳細的說明，開發中 Server(devServer)

根據上面的webpack.config.js的代碼，添加如下代碼

const devConfigFun = (argument)=> {
    argument.devtool = '#cheap-module-eval-source-map';
    argument.devServer = {
        port: '8000',
        host: '0.0.0.0',
        overlay: {
            errors: true
        },
        open: true,
        hot: true
    }
    argument.plugins.push(
    	new webpack.HotModuleReplacementPlugin(),
    	new webpack.NoEmitOnErrorsPlugin()
    )
    return argument;
}

module.exports = (env)=> {
    let config = configFun(env)
    if (env.NODE_ENV === 'development') {
        config = devConfigFun(config)
    }
    return config
};
複製代碼

NODE_ENV設置成其餘文件能夠訪問

在原來的代碼基礎上添加

任意js文件或者vue文件均可以獲取

// src/main.js
console.log(process.env.NODE_ENV) // development

// src/app.vue
mounted() {
    console.log(process.env.NODE_ENV) // development
}
複製代碼

const configFun = (env)=> {
    return {
        plugins: [
            
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: env.NODE_ENV === 'development' ? '"development"' : '"production"' // 這裏是雙冒號
                }
            }),
        ]
    }
}
複製代碼

將package.json的script修改一番

"scripts": {
    "dev": "webpack-dev-server --mode development --env.NODE_ENV=development",
    "build": "webpack --mode production --env.NODE_ENV=PRODUCTION"
  },
複製代碼

控制檯 npm run dev 自動打開默認瀏覽器，默認8000端口

控制檯 npm run build 編譯在src的dist的文件中(包含index.htm和index.js)

webpack 4.x + Vue最基礎配置，保證能啓動和編譯，距離vue-cli的webpack模式還差得遠，但在不斷學習和完善，也會不斷更新...敬請期待

往後也會更新parcel + vue的配置文檔 parcel官網

本項目的代碼在GitHub的demo_01