webpack 4.x + Vue基礎配置，強化對vue-cli的認識

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

webpack中文官網(wǎng)

坑：全局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 開發(fā)模式，編譯后的js不壓縮
    • --mode production 生產(chǎn)模式，編譯后的js壓縮
  • --env.NODE_DEV 設置環(huán)境模式
    • --env.NODE_ENV=development 設置環(huán)境為development開發(fā)模式
    • --env.NODE_ENV=production 設置環(huán)境為production生產(chǎn)模式
webpack     // 不設置mode的情況下 打包出來的文件自動壓縮
webpack --mode development  // 設置mode為開發(fā)模式，打包后的文件不被壓縮
webpack --mode production // 設置mode為生成環(huán)境，打包后的文件壓縮
webpack --env.NODE_ENV=development 設置process.env.NODE_ENV為開發(fā)環(huán)境
webpack --env.NODE_ENV=development 設置process.env.NODE_ENV為生產(chǎn)環(huán)境

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' 根據(jù)此處判斷環(huán)境
  console.log('Production: ', env.production) // ture

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

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

肯定就安裝vue相關(guān)的vue的npm包 vue vue-loader

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

npm i -D vue vue-loader

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

image

代碼如下

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

  • 疑問1、如果不明白babel-core babel-loader babel-preset-es2015的區(qū)別和聯(lián)系可以點擊查看一下??大神的文章

babel-loader、babel-core、babel-preset-env的區(qū)別和聯(lián)系

  • 疑問2、url-loader file-loader的關(guān)系

url-loader對未設置或者小于limit設置的圖片進行轉(zhuǎn)換，以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根據(jù)你下載的npm的babel-preset-es2015包不同來決定的； 如果是babel-preset-env，那就是"presets": ["env"]

第四步 生成html模塊

到現(xiàn)在為止項目中沒有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的，表示內(nèi)容變化的時候生成一個新的文件。
  • 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用于開發(fā)者在開發(fā)中配置使用的

webpack官網(wǎng)有詳細的說明，開發(fā)中 Server(devServer)

根據(jù)上面的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)

image

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

日后也會更新parcel + vue的配置文檔
parcel官網(wǎng)

本項目的代碼在GitHub的demo_02

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容