webpack4手動搭建Vue開發環境實現todoList項目（1）

時間 2019-11-08

標籤 webpack4 webpack 手動搭建 vue 開發環境實現 todolist 項目简体版

原文原文鏈接

前言

日常在工做開發中，爲了效率咱們一般都會直接使用Vue-cli腳手架去搭建Vue開發環境，確實這種工具是節省了咱們很多時間，可是你有沒有想過Vue開發環境是如何搭建起來的？還有若是是你本身動手去搭建，能順利搭建起來嗎？css

基於這些想法，我就搗鼓了一下webpack4，而且弄下來了這個小項目，感受一個小項目下來收貨仍是挺大的，因此就寫一遍文章，分享心得，哈哈！！html

基於我的的時間精力問題，把本項目教程分爲兩部分：vue

webpack4手動搭建Vue開發環境（本篇文章）
手動搭建Vue項目文件夾實現todoList（包括Vue全家桶）

但願你能把教程看完，而且能收貨到你想要的東西，嘻嘻，好了，開始！！webpack

1、搭建webpack運行環境

鑑於文章篇幅的長度，本教程不會詳細講述webpack4的知識點，若是對搭建步驟有什麼疑惑的或者有知識點看不懂的，能夠先自行Google搜索一下，我悄悄跟你說，webpack4仍是有不少坑的，可是所謂的進步就是不斷不斷地踩坑（捂臉表情）！！git

初始化項目

在命令行中運行npm init -y初始化項目，生產package.json文件github

安裝webpack依賴

npm i webpack webpack-cli --save-devweb

基本項目目錄搭建

webpack.base.dev.js基本配置 vue-router

修改腳本命令

在修改package.json文件裏的scripts配置vuex

運行webpack

在main.js裏面輸入document.write("Hello World")npm

根據上述圖片配置webpack.base.dev.js文件

在命令行中運行npm run test命令，dist文件夾裏會有js文件生成

在index.html 引入，若成功輸出Hello World即證實webpack運行環境配置成功...

2、開始搭建Vue環境

Vue運行環境分爲開發環境和生產環境，不一樣的環境對功能的實現要求也是不同的，好比生產環境須要壓縮代碼，而開發環境須要sourceMap便於調試，而這兩種環境也有公共的配置！！

接下來在下面我會慢慢講述不一樣環境須要實現的功能

在build裏面新建文件

webpack.base.conf.js 公共配置文件
webpack.dev.conf.js 開發環境配置文件
webpack.prod.conf.js 生產環境配置文件

公共配置文件

webpack.base.conf.js是公共配置文件，須要實現如下功能 :

字體處理
處理圖片以及優化
識別Vue文件
啓用babel轉碼，把ES6轉換ES5代碼
音樂文件處理
配置打包後的html模板
配置resolve模塊解析

在package.json文件裏面scripts配置運行腳本命令 :

"test":"webpack --config build/webpack.base.conf.js"

在命令行上運行npm run test便可運行webpack.base.conf.js配置文件

開發環境配置文件

webpack.dev.conf.js是開發環境配置文件，該環境注重調試效率：

打包處理css和less文件，設置sourceMap方便定位調試
postcss-loader自動添加前綴
配置devServer開啓熱更新功能

在package.json文件裏面scripts配置運行腳本命令 :

"dev":"cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

在命令行上運行npm run dev便可運行webpack.dev.conf.js配置文件

生產環境配置文件

webpack.prod.conf.js是生產環境配置文件，該環境注重壓縮代碼和性能：

打包處理css和less文件
mini-css-extract-plugin抽離樣式爲單獨css文件
postcss-loader自動添加前綴
clean-webpack-plugin每次打包清理建立的dist文件夾
optimize-css-assets-webpack-plugin壓縮css文件代碼
terser-webpack-plugin壓縮JS文件代碼

在package.json文件裏面scripts配置運行腳本命令 :

"build":"cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"

在命令行上運行npm run build便可運行webpack.prod.conf.js配置文件

3、搭建公共配置文件功能

上面把三個配置文件須要實現的功能都列舉出來了，如今只要按着功能去搭建、去配置就行了，好了，開始！！

在webpack.base.conf.js裏面開始公共配置功能

配置處理字體、圖片、音樂功能

處理字體、圖片和音樂須要安裝相關依賴

npm i url-loader file-loader --save-dev

配置代碼以下

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, '../src/main.js'),
    output: {
        filename: 'js/[name].[hash:5].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: './'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [{
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'img/[name]-[hash:5].[ext]',
                        }
                    }
                ]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name]-[hash:5].[ext]',
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 4096,
                            name: 'media/[name]-[hash:5].[ext]',
                        }
                    }
                ]
            }
        ]
    },
}
複製代碼

url-loader和file-loader功能類似，都是在webpack中處理圖片、字體圖標等文件

它們之間的關係是url-loader封裝了file-loader，但url-loader並不依賴於file-loader

url-loader能夠經過limit屬性對圖片分狀況處理，當圖片小於limit（單位：byte）大小時轉base64，大於limit時調用file-loader對圖片進行處理。

ES6轉換ES5代碼

在這裏我吐一下苦水，在學習使用babel配置ES6轉換代碼的時候，真的費了很大的心思，配置了好久，不少loader我都搞不清楚是什麼關係（捂臉）,後來看了官網和別人的博客才分清楚了~~~好了，開始！！

首先要安裝相關loader

npm i babel-loader @babel/core @babel/polyfill @babel/preset-env core-js@3 --save-dev

babel-loader只支持ES6語法轉換，可是不支持ES6新增長的API
babel-polyfill能夠添加ES6新增長API，讓客戶端支持
babel-preset-env能夠配置讓JS兼容的運行環境
babel-core把js 代碼分析成 ast ，方便各個插件分析語法進行相應的處理

看配置代碼

這樣子配置只支持ES6語法轉換，不支持ES6新增長API

在入口文件main.js裏面添加import @babel/polyfill

這樣子就可使用ES6新增長的API了，可是這是你會發現打包後的JS文件比較大，並且裏面有不少ES6的API也是你沒用到的，因此這時候你須要作到按需引入

在根目錄下建立babel.config.js文件，在裏面設置配置

好了，這樣就能夠實現按需引入了，能夠大大減小打包後的JS文件大小了，嗯嗯，我也終於把知識點整理出來了（捂臉）（辛酸臉）~~~

配置打包Vue文件

首先先安裝依賴

npm i vue vue-loader vue-template-compiler --save-dev

在src文件夾上新建Vue文件App.vue

在main.js入口文件上引入Vue而且掛載到節點上

好了，開始打包Vue文件的配置

這樣就行了，感受打包Vue以及掛載節點這段代碼手敲出來仍是挺有感受的

配置html模板頁面

安裝依賴

npm i html-webpack-plugin --save-dev

使用 html-webpack-plugin來建立html頁面，並自動引入打包生成的文件

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

plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'../index.html'),
            filename: 'index.html'
        }),
    ]

複製代碼

具體配置能夠查看npm文檔

www.npmjs.com/package/htm…

配置resolve模塊解析

配置alias方便路徑的檢索效率以及配置文件默認擴展名

resolve: {
        extensions: ['.js','.json','.vue'],
        alias: {
            '@': path.resolve(__dirname,'../src')
        }
    }
複製代碼

"@":"指向src文件夾"

好了，到這裏爲止，已經完成了配置文件的公共部分了，接下來開始針對環境進行配置了！！！

在命令行上運行npm run test，能夠運行公共配置文件

4、生產環境配置

好了，直接開敲！！！

在webpack.prod.conf.js文件裏面進行配置

定義環境變量

webpack裏面提供了DefinePlugin插件能夠方便定義環境變量

plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
    ],
複製代碼

處理css和less文件

生產環境處理css和less文件須要把css樣式提取出來到一個獨立的css文件裏面

而且自動添加前綴，sourceMap

處理css和less文件

npm i css-loader less less-loader --save-dev

自動添加前綴

npm i postcss-loader autoprefixer --save-dev

提取css樣式到獨立css文件

npm i mini-css-extract-plugin --save-dev

篇幅過長，沒法截圖，直接上代碼

const webpackConfig = require('./webpack.base.conf');
const merge = require('webpack-merge');
const webpack = require('webpack');
//抽離CSS樣式
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(webpackConfig,{
    mode: 'production',
    devtool: 'cheap-source-map',
    module: {
        rules: [
            {
                test: /\.(c|le)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader=>[
                                require('autoprefixer')({
                                    browsers: [
                                        "last 2 versions",
                                        "> 1%"
                                    ]
                                })
                            ]
                        }
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css',
            chunkFilename: 'css/[id]-[hash:5].css',
        }),
    ],
}
複製代碼

清理打包建立文件夾

打包過程當中你會發現每次打包後dist文件夾都會不斷增長文件, 顯然這個方面咱們須要處理

安裝相關依賴

npm i clean-webpack-plugin --save-dev

//清理dist
const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
    new CleanWebpackPlugin(),
],
複製代碼

壓縮js和css代碼

壓縮css代碼

npm i optimize-css-assets-webpack-plugin --save-dev

壓縮js代碼

npm i terser-webpack-plugin --save-dev

使用方式

optimization: {
        minimizer: [
            //壓縮css
            new OptimizeCssAssetsWebpackPlugin({}),
            // 壓縮JS
            new TerserWebpackPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
            //具體更多配置能夠查看官網
        ]
    }
複製代碼

在命令行上運行npm run build能夠運行開發環境配置文件

好了，說完開發環境的配置，接下來到生產環境的配置了

5、開發環境配置

在webpack.dev.conf.js文件裏面進行配置

有點小累（捂臉）

定義環境變量

跟生產環境同樣，首先也是要定義環境變量

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('development')
    }
}),
複製代碼

處理css和less文件

開發環境下的css和less不須要提取樣式，只須要添加前綴和sourceMap方便調試

安裝依賴

處理css和less文件

npm i style-loader css-loader less less-loader --save-dev

自動添加前綴

npm i postcss-loader autoprefixer --save-dev

const webpackConfig = require('./webpack.base.conf.js');
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');

module.exports = merge(webpackConfig,{
    mode: 'development',
    // source-map,將編譯後的代碼映射到原代碼，便於報錯後定位錯誤
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(c|le)ss$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: loader=>[
                                require('autoprefixer')({
                                    browsers: [
                                        "last 2 versions",
                                        "> 1%"
                                    ]
                                })
                            ]
                        }
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
}
複製代碼

配置devServer

webpack上能夠開啓熱更新模式，大大加速開大效率。

安裝相關依賴

npm i webpack-dev-server --save-dev

上代碼

//具體更多配置能夠參考官網
    devServer: {
        contentBase: path.resolve(__dirname,'../dist'),
        // hot: true,
        port: 9090,
        overlay: {
            warnings: true,
            errors: true
        },
        publicPath: '/'
    }
    
    plugins: [
        // 啓用模塊熱替換(HMR)
        new webpack.HotModuleReplacementPlugin(),
        // 當開啓 HMR 的時候使用該插件會顯示模塊的相對路徑，建議用於開發環境。
        new webpack.NamedModulesPlugin(),
    ],
複製代碼

這樣子就能夠在線調試，無需手動刷新了！！嘻嘻

好了，開發環境的配置也完成了

在命令行上輸入npm run dev能夠運行生產環境配置文件