從頭開始-手把手用webpack4搭建vue/react環境

時間 2019-11-08

標籤從頭開始手把手用 webpack4 webpack 搭建 vue react 環境欄目 React 简体版

原文原文鏈接

Created By JishuBao on 2019-03-06 12:38:22
Recently revised in 2019-03-08 12:38:22javascript

歡迎你們來到技術寶的掘金世界,您的star是我寫文章最大的動力！GitHub地址 css

開篇點題:
這是一篇使用webpack4搭建vue/react環境的文章，會詳細的介紹每一個插件的做用等...
感受不錯的小夥伴，點贊star走一波;
感受文章有誤的小夥伴，評論區、QQ羣走一波；
虛心求教，不勝感激~ html

1、Webpack概述

webpack是模塊化管理工具，使用webpack能夠對模塊進行壓縮、預處理、按需打包、按需加載等。vue

2、webpack基本概念

在深刻了解webpack以前咱們先來了解幾個相關概念(知道你們懶得看，就粗略的介紹下)：
html5

Entry:入口，Webpack執行構建的第一步將從Entry開始，可抽象成輸入。
Module:模塊，在Webpack裏一切皆模塊，一個模塊對應着一個文件。webpack會從配置的Entry開始遞歸找出全部依賴的模塊。
Chunk:代碼塊，一個Chunk由多個模塊組合而成，用於代碼合併與切割。
Loader:模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
Plugin:擴展插件,在Webpack構建流程中的特定時機會廣播出對應的時間，插件能夠監聽這些事件的發生,在特定時機作對應的事情。

3、webpack實操(小白入門級別)

確定有小夥伴們百度過其餘的文章，也確定遇到過只誇誇而談而不實際操做的博主，或者一些博主只是粗略的一筆帶過，致使你們啥也沒有收穫，越看越迷糊，本文與那些不負責任的博主是不同的(開個玩笑)，本文真刀真槍，實際操做，帶小夥伴從零開始手動搭建一個webpack的開發環境，精細到新建文件夾級別(手動滑稽)，爭取每一行代碼你們看的見、理解的透徹！！java

新建個文件夾

首先新建一個文件夾，技術寶喜歡在E盤的MyProject目錄下新建文件夾，取名叫作WebpackofVueStage，以下圖所示： node

用編輯器打開文件夾

使用編輯器打開文件夾，我在這裏使用的是VSCODE,這是微軟推出的一款編輯器，很是好用，建議小夥伴們均可以來試試看哦~，以下圖所示：react

在vscode終端中打開這個文件夾，即在這個文件夾下打開所在命令行，輸入`npm init`，會生成一個`package.json`文件

內容以下

4、在目錄下新建文件

在主目錄下新建build目錄存放webpack相關配置文件、src目錄存放源碼目錄包括資源文件、js、css文件等...,目錄結構入下圖所示，文件均爲空，技術寶將帶着你們一行行代碼實現這"宏偉"的項目。webpack

5、磨刀霍霍敲起來

webpack相關文件的代碼編寫：此處將webpack文件分爲三個文件css3

1.webpack.base.conf.js(基礎代碼的編寫)

const path=require('path');
//利用require導入了node中path模塊,path模塊了一些處理文件路徑的小工具，因爲webpack是基於Node環境下的工具，因此能夠直接使用node原生模塊path
複製代碼

const SRC_PATH=path.resolve(__dirname,"../src")
//path.resolve()方法能夠將路徑或者路徑片斷解析成絕對路徑，具體能夠結合官方文檔進行查看,綜合來看，path.resolve()是一個修改和整合文件路徑的方法，dirname是directory+name的縮寫，故名思義，是文件名的意思。總的來講就是將絕對路徑提取出來
複製代碼

entry:{
    main:'./src/index.js'
}
//入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的
複製代碼

本文以vue爲例，首先安裝須要安裝的依賴包

npm install vue -S
//-S即-save的縮寫，包會寫入dependencies，-D或者--save-d會寫入devDepencies中
複製代碼

npm install webpack webpack-cli webpack-dev-server webpack-merge --save-dev
//webpack-cli是 webpack 的命令行工具。讓咱們能夠不用寫打包腳本，只需配置打包配置文件，而後在命令行輸入 webpack-cli --config webpack.config.js 來使用 webpack, 簡單不少。webpack 4 以前命令行工具是集成在 webpack 包中的，4.0 開始 webpack 包自己再也不集成 cli。webpack-dev-server用於開發調試，它提供了web服務、熱更新、接口代理等支持。webpack-merge提供了一個merge鏈接數組併合並建立新對象的對象的函數。若是遇到函數，它將執行它們，經過算法運行結果，而後再次將返回的值包裝在函數中。
複製代碼

resolve:{
        extensions:['.vue','.js'],
        alias:{
            '@':SRC_PATH
        }
},
//Resolve 配置 Webpack 如何尋找模塊所對應的文件,extensions:在導入語句沒帶文件後綴時，Webpack 會自動帶上後綴後去嘗試訪問文件是否存在。alias: 配置項經過別名來把原導入路徑映射成一個新的導入路徑。 
複製代碼

module:{
        rules:[
            {
                test:/\.vue$/,//經過loader來預處理文件 容許你打包除了js以外的任何靜態資源
                use:'vue-loader'
            },
            {
                test:/\.js?$/,
                use:'babel-loader',
                //排除node_modules目錄下的文件
                exclude:/node_modules/,
                include:SRC_PATH
            },
            {
                test:/\.(woff|svg|eot|woff2|tff)$/,
                use:[
                    {
                        loader:'url-loader',
                        include: [resolve('src')],
                        options:{
                            limit:10000
                        }
                    }
                ],
                exclude:/node_modules/,
            }
        ]
    },
複製代碼

如上：須要安裝圖示對應的loader

npm install vue-loader babel-loader url-loader --save-dev
//rules是module的屬性，指定模塊解析規則，而use是每個rule的屬性，指定要用什麼loader。vue-loader：解析和轉換 .vue 文件，提取出其中的邏輯代碼 script、樣式代碼 style、以及 HTML 模版 template，再分別把它們交給對應的 Loader 去處理。babel-loader用於將ES6轉化爲ES5等功能。url-loader他能夠將html以及css中的圖片打包成base64，可是js中若是有圖片url並不能編譯成功。用於減小http請求實現性能優化。
複製代碼

當使用vue-loader時，請確保您已經引入vue的插件

const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins:[
        new VueLoaderPlugin(),
        //它的職責是將你定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊。例如，若是你有一條匹配 /\.js$/ 的規則，那麼它會應用到 .vue 文件裏的 <script> 塊。
]
複製代碼

至此基礎webpack文件已經搭建好，如下是webpack.base.conf.js的完整代碼：

const path=require('path');
//path是node.js的一個模塊，提供了一些用於處理文件路勁的小工具
const SRC_PATH=path.resolve(__dirname,"../src");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports={
    entry:{
        main:"./src/index.js"//入口起點(entry point)指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的
    },
    resolve:{
        extensions:['.vue','.js'],
        alias:{
            '@':SRC_PATH
        }
    },
    module:{
        rules:[
            {
                test:/\.vue$/,//經過loader來預處理文件 容許你打包除了js以外的任何靜態資源
                use:'vue-loader'
            },
            {
                test:/\.js$/,
                use:'babel-loader',
                //排除node_modules目錄下的文件
                exclude:/node_modules/,
                include:SRC_PATH
            },
            {
                test:/\.(woff|svg|eot|woff2|tff)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:10000
                        }
                    }
                ],
                exclude:/node_modules/,
            }
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        //它的職責是將你定義過的其它規則複製並應用到 .vue 文件裏相應語言的塊。例如，若是你有一條匹配 /\.js$/ 的規則，那麼它會應用到 .vue 文件裏的 <script> 塊。
    ]

}
複製代碼

2.webpack.dev.conf.js的編寫(開發環境)

const webpack=require('webpack');
//require工做原理:首先肯定是不是一個原生的模塊,若是不是就進入node_modules查找,再看是否在package.json的main裏面定義。
複製代碼

const merge=require('webpack-merge');
//webpack-merge提供了一個merge鏈接數組併合並建立新對象的函數。
複製代碼

const baseWebpackConfig=require('./webpack.base.conf.js');
//引入基礎webpack設置。
複製代碼

const HtmlWebpackPlugin=require('html-webpack-plugin');
//這是一個webpack插件，能夠簡化HTML文件的建立，爲您的webpack捆綁服務提供服務。這對於webpack在文件名中包含哈希的包頗有用，這些哈希值會更改每一個編譯。基本做用就是生成HTML。
複製代碼

const derServerPort=10000;
//開發環境的端口號。
複製代碼

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
//識別某些類別的webpack錯誤，並清理，聚合和優先級，以提供更好的開發人員體驗。(友好的提示插件)。
複製代碼

npm install friendly-errors-webpack-plugin html-webpack-plugin --save-dev
//安裝上述代碼所須要的依賴
複製代碼

mode:'development'
//開發環境,會將 process.env.NODE_ENV 的值設爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin
複製代碼

devtool:'cheap-module-eval-source-map'
//不帶列映射(column-map)的 SourceMap，將加載的 Source Map 簡化爲每行單獨映射。.
複製代碼

module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"less-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                        }
                    }
                ]
            }
        ]
    },
//直接來講是把對應後綴名轉化爲css文件
複製代碼

npm install style-loader css-loader sass-loader less-loader postcss-loader file-loader --save-dev
//使用style-loader經過注入<style>標記將CSS添加到DOM。css-loader 解釋(interpret) @import 和 url() ，會 import/require() 後再解析(resolve)它們。sass-loader:將 Sass 編譯成 CSS。less-loader:將less轉化爲css。postcss-loadercss3屬性已經給加上了瀏覽器前綴,file-loader與file-loader相似。
複製代碼

devServer:{
        port:derServerPort,//指定要監聽請求的端口號
        overlay:{//當編譯器存在錯誤或警告時,將瀏覽器顯示全屏覆蓋
            warnings:false,
            errors:true,
        },
        host:"localhost",
        open:true,//開發服務器將打開瀏覽器
        noInfo:true,//那些顯示的 webpack 包(bundle)信息」的消息將被隱藏。錯誤和警告仍然會顯示。
        https:false,
        hot:true,//啓用webpack的模塊熱更新
        compress:true,//一切服務都啓用gzip壓縮
        progress:true,//將任務進度輸出到控制檯
        quiet:true,
        useLocalIp:false,//此選項容許瀏覽器使用你的本地ip打開
        proxy:{//代理服務器
            "/api":{
                target:"http://localhost:8080",
                changeOrigin:true,
                pathRewrite:{"^api":"/api"}
            }
        }
    },
    //以上爲webpack開發模式下的代碼片斷
複製代碼

plugins:[
        //處理html
        new HtmlWebpackPlugin({
            template:'src/public/index.html',//開發環境須要路徑
            inject:'body',//全部javascript資源將被放置在body元素的底部
            minify:{
                html5:true,
                collapseWhitespace: true, //把生成的 index.html 文件的內容的沒用空格去掉，減小空間
            },
            title:'基於vue的webpack4教手架項目 準備在項目中採用vue-router、vuex、vant等技術(development開發環境)',
            hash:true,
            favicon:'src/assets/favicon-shield.ico',//將給定的favicon路徑添加到輸出HTML
            showErrors:true,
        }),
        //熱更新
        new webpack.HotModuleReplacementPlugin(),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: [`You application is running here http://localhost:${derServerPort}`],
                notes: ['Some additionnal notes to be displayed unpon successful compilation']
            },
            onErrors: function (severity, errors) {},
            clearConsole: true,
            additionalFormatters: [],
            additionalTransformers: []
        }),
        new webpack.LoaderOptionsPlugin({
            options:{
            }
        })
    ]
    //開發環境下的插件配置
複製代碼

至此開發環境下的webpack已搭好，webpack.dev.conf.js文件完整代碼以下：

const webpack=require('webpack');
//require工做原理:首先肯定是不是一個原生的模塊,若是不是就進入node_modules查找,再看是否在package.json的main裏面定義。
const merge=require('webpack-merge');
//webpack-merge提供了一個merge鏈接數組併合並建立新對象的函數
const baseWebpackConfig=require('./webpack.base.conf.js');
//引入基礎webpack設置
const HtmlWebpackPlugin=require('html-webpack-plugin');
const derServerPort=10000;
//基本做用就是生成html文件
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
//友好的提示

module.exports=merge(baseWebpackConfig,{
    mode:'development',//開發環境,會將 process.env.NODE_ENV 的值設爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin
    devtool:'cheap-module-eval-source-map',//不帶列映射(column-map)的 SourceMap，將加載的 Source Map 簡化爲每行單獨映射。
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"},
                    {loader:"less-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                        }
                    }
                ]
            }
        ]
    },
    devServer:{
        port:derServerPort,//指定要監聽請求的端口號
        overlay:{//當編譯器存在錯誤或警告時,將瀏覽器顯示全屏覆蓋
            warnings:false,
            errors:true,
        },
        host:"localhost",
        open:true,//開發服務器將打開瀏覽器
        noInfo:true,//那些顯示的 webpack 包(bundle)信息」的消息將被隱藏。錯誤和警告仍然會顯示。
        https:false,
        hot:true,//啓用webpack的模塊熱更新
        compress:true,//一切服務都啓用gzip壓縮
        progress:true,//將任務進度輸出到控制檯
        quiet:true,
        useLocalIp:false,//此選項容許瀏覽器使用你的本地ip打開
        proxy:{//代理服務器
            "/api":{
                target:"http://localhost:8080",
                changeOrigin:true,
                pathRewrite:{"^api":"/api"}
            }
        }
    },
    plugins:[
        //處理html
        new HtmlWebpackPlugin({
            template:'src/public/index.html',//開發環境須要路徑
            inject:'body',//全部javascript資源將被放置在body元素的底部
            minify:{
                html5:true,
                collapseWhitespace: true, //把生成的 index.html 文件的內容的沒用空格去掉，減小空間
            },
            title:'基於vue的webpack4教手架項目 準備在項目中採用vue-router、vuex、vant等技術(development開發環境)',
            hash:true,
            favicon:'src/assets/favicon-shield.ico',//將給定的favicon路徑添加到輸出HTML
            showErrors:true,
        }),
        //熱更新
        new webpack.HotModuleReplacementPlugin(),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: [`You application is running here http://localhost:${derServerPort}`],
                notes: ['Some additionnal notes to be displayed unpon successful compilation']
            },
            onErrors: function (severity, errors) {},
            clearConsole: true,
            additionalFormatters: [],
            additionalTransformers: []
        }),
        new webpack.LoaderOptionsPlugin({
            options:{
                // postcss:[
                // require('postcss-plugin-px2rem')({
                // rootValue:75,
                // selectorBlackList:['html'],
                // mediaQuery:true,
                // propBlackList:['75px']
                // })
                // ],
            }
        })
    ]
});
複製代碼

3.webpack.prod.conf.js代碼的編寫(生產環境)

與上文中代碼相同再也不贅述

const path=require('path');
const DIST_PATH=path.resolve(__dirname,"../dist");
const CleanWebpackPlugin=require('clean-webpack-plugin');
//打包以前清除文件
複製代碼

const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//分析打包後的包體積大小等
複製代碼

const MiniCssExtractPlugin=require('mini-css-extract-plugin');
//分離css
複製代碼

mode:"production"
 //會將 process.env.NODE_ENV 的值設爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
複製代碼

output:{
        filename:"js/[name].[hash].js",
        path:DIST_PATH
},
複製代碼

module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:'less-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                            name:"[hash].[ext]",
                            outputPath:"images/"
                        }
                    }
                ]
            }
        ]
    },
    //與開發模式下基本相同,MiniCssExtraPlugin插件分離css文件
複製代碼

plugins:[
        new CleanWebpackPlugin(['dist'],{root:path.resolve(__dirname,'../'),verbose:true}),//每次打包前清除dist
        new HtmlWebpackPlugin({
            //將目錄下的index.html引進生成的dist中的index.html
            template:'src/public/index.html',
            title:'基於vue的webpack4教手架項目 準備在項目中採用vue-router、vuex、vant等技術(product生產環境)',
            favicon:'src/assets/favicon-shield.ico',
            minify:{
                removeComments:true,
                collapseWhitespace:true,
                removeAttributeQuotes:true
            },
            
        }),
        new BundleAnalyzerPlugin({//打包分析
            analyzerPort:10000,
            openAnalyzer:true,
        }),
        new MiniCssExtractPlugin({//分離css
            filename:"css/[name].[chunkhash:8].css",
            chunkFilename:"css/[id].[hash]css"
        })
    ]
複製代碼

至此webpack生產環境已經搭建完成，完整代碼以下：

const merge=require('webpack-merge');
const baseWebpackConfig=require('./webpack.base.conf.js');
const webpack=require('webpack');
const path=require('path');
const DIST_PATH=path.resolve(__dirname,"../dist");
//打包以前清除文件
const CleanWebpackPlugin=require('clean-webpack-plugin');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//打包的時候分析包大小等
const BundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
//分離css
const MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports=merge(baseWebpackConfig,{
    mode:"production",//會將 process.env.NODE_ENV 的值設爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
    devtool:'cheap-module-source-map',//不帶列映射(column-map)的 SourceMap，將加載的 Source Map 簡化爲每行單獨映射。
    output:{
        filename:"js/[name].[hash].js",
        path:DIST_PATH
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(sc|sa)ss$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:"sass-loader"},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    {loader:'css-loader'},
                    {loader:'less-loader'},
                    {loader:"postcss-loader"}
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            limit:10000,
                            name:"[hash].[ext]",
                            outputPath:"images/"
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist'],{root:path.resolve(__dirname,'../'),verbose:true}),//每次打包前清除dist
        new HtmlWebpackPlugin({
            //將目錄下的index.html引進生成的dist中的index.html
            template:'src/public/index.html',
            title:'基於vue的webpack4教手架項目 準備在項目中採用vue-router、vuex、vant等技術(product生產環境)',
            favicon:'src/assets/favicon-shield.ico',
            minify:{
                removeComments:true,
                collapseWhitespace:true,
                removeAttributeQuotes:true
            },
            
        }),
        new BundleAnalyzerPlugin({//打包分析
            analyzerPort:10000,
            openAnalyzer:true,
        }),
        new MiniCssExtractPlugin({//分離css
            filename:"css/[name].[chunkhash:8].css",
            chunkFilename:"css/[id].[hash]css"
        })
    ]
});
複製代碼

src相關文件的代碼編寫

如上述，咱們已經完成了與webpack相關的代碼編寫。接下來就是源碼相關的編寫了在上面敲的代碼中咱們會發現例如index.js、index.html等都未進行代碼的編寫，接下來咱們就要完善這部分的代碼。Are you ready?

1.首先準備css圖標圖片favicon-shield.ico(ico後綴是圖表圖片格式),放入assets文件夾

2.index.html模板文件的編寫，放入public文件夾下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>
複製代碼

3.入口文件index.js的編寫，放入src根目錄下：

import Vue from 'vue';
//在import Vue的過程當中Vue主要是在原型上完成方法的掛載，而且初始化了全局的API。
import App from './App.vue';//引入vue頁面(稍候書寫)
import './styles/reset.css';//引入樣式重置

Vue.config.productionTip=false;//阻止啓動生產消息，經常使用做指令

new Vue({
    el:"#root",//將渲染結果掛在這id爲root的html上
    render:h=>h(App),//render函數是渲染一個視圖，而後提供給el掛載，若是沒有render那頁面什麼都不會出來
});
複製代碼

解析vue template 標籤要安裝制定依賴

npm install vue-template-compiler --save-dev
複製代碼

4.在src目錄下編寫app.vue頁面

<template>
    <div class="container"><span>{{msg}}</span></div>
</template>

<script>
export default {
    data(){
        return{
            msg:'webpack4搭建react環境基本完成，是否是很簡單呢'
        }
    }
}
</script>

<style>
.container{
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    color:red;
    box-shadow:5px 5px 5px 5px;
}
</style>
複製代碼

5.編寫樣式文件reset.css

/* 
  * reset 的目的不是讓默認樣式在全部瀏覽器下一致，而是減小默認樣式有可能帶來的問題。
  * The purpose of reset is not to allow default styles to be consistent across all browsers, but to reduce the potential problems of default styles.
  * create by jsliang
*/

/** 清除內外邊距 - clearance of inner and outer margins **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 結構元素 - structural elements */
dl, dt, dd, ul, ol, li, /* 列表元素 - list elements */
pre, /* 文本格式元素 - text formatting elements */
form, fieldset, legend, button, input, textarea, /* 表單元素 - from elements */
th, td /* 表格元素 - table elements */ {
  margin: 0;
  padding: 0;
}

/*默認初始化樣式*/
body{
  margin:0;padding:0;font-size:"微軟雅黑";box-sizing: border-box;
}

body,html{
  text-size-adjust: none;/*文本不會隨着設備尺寸的變化而變化*/
  width:100%;
  height:100%;
}

*{text-decoration: none;list-style:none;}

img{border:0px;}

/** 設置默認字體 - setting the default font **/
body, button, input, select, textarea {
  font: 18px/1.5 '黑體', Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-size: 100%; }

/** 重置列表元素 - reset the list element **/
ul, ol { list-style: none; }

/** 重置文本格式元素 - reset the text format element **/
a, a:hover { text-decoration: none; }

/** 重置表單元素 - reset the form element **/
button { cursor: pointer; }
input { font-size: 18px; outline: none; }

/** 重置表格元素 - reset the table element **/
table { border-collapse: collapse; border-spacing: 0; }

/** 圖片自適應 - image responsize **/
img { border: 0; display: inline-block; width: 100%; max-width: 100%; height: auto; vertical-align: middle; }

/* 
    * 默認box-sizing是content-box，該屬性致使padding會撐大div，使用border-box能夠解決該問題
    * set border-box for box-sizing when you use div, it solve the problem when you add padding and don't want to make the div width bigger
*/
div, input { box-sizing: border-box; }

/** 清除浮動 - clear float **/
.jsbao-clear:after, .clear:after {
  content: '\20';
  display: block;
  height: 0;
  clear: both;
}
.jsbao-clear, .clear {
  *zoom: 1;
}

/** 設置input的placeholder - set input placeholder **/
input::-webkit-input-placeholder { color: #919191; font-size: .26rem } /* Webkit browsers */
input::-moz-placeholder { color: #919191; font-size: .26rem } /* Mozilla Firefox */
input::-ms-input-placeholder { color: #919191; font-size: .26rem } /* Internet Explorer */
複製代碼

6.配置package.json文件

npm install cross-env --save-dev
//解決webpack命令設置node_env=development無反應等 可跨平臺使用
複製代碼

在package.json中的scripts標籤中寫入

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env webpack-dev-server --config build/webpack.dev.conf.js",
    "build": "cross-env webpack --config build/webpack.prod.conf.js"
 },
複製代碼

7.關於babel

你們都知道babel在編程中的重要性,固然搭建Vue環境也是不可缺乏的,讓咱們看看經常使用的babel都有哪些呢(新版本已出,本文全線升級成babel 7.x以上)

@babel/core:@babel/core的做用是把 js 代碼分析成 ast ，方便各個插件分析語法進行相應的處理。

npm install @babel/core@7.1.2 --save-dev
複製代碼

@babel/plugin-proposal-class-properties的做用是把es6的類轉化爲瀏覽器可讀的

npm install @babel/plugin-proposal-class-properties@7.1.0 --save-dev 複製代碼

@babel/plugin-proposal-decorators的做用是把裝飾器轉爲爲未瀏覽器可讀的

npm install @babel/plugin-proposal-decorators@7.1.6 --save-dev
複製代碼

@babel/plugin-proposal-function-bind的做用是把：：做用於綁定符轉化未瀏覽器可讀的

npm install @babel/plugin-proposal-function-bind@7.0.0 --save-dev 複製代碼

@babel/plugin-syntax-dynamic-import的做用是支持promise和數組的迭代相關的方法

npm install @babel/plugin-syntax-dynamic-import@7.0.0 --save-dev
複製代碼

@babel/plugin-transform-runtime的做用會自動polyfill es5不支持的特性

npm install @babel/plugin-transform-runtime@7.1.0 --save-dev
複製代碼

@babel/polyfill:這個庫將會模擬一個徹底的 ES2015+ 的環境。這意味着你可使用新的內置語法好比 promise 或者 WeakMap，靜態方法好比Array.from 或 Object.assign, 實例方法好比 Array.prototype.includes 和 generator 函數。

npm install @babel/polyfill@7.2.5 --save-dev
複製代碼

@babel/preset-env是一個智能預設，容許您使用最新的JavaScript，

npm install @babel/preset-env@7.1.6 --save-dev
複製代碼

@babel/preset-react:轉化react中jsx的寫法

npm install @babel/preset-react@7.0.0 --save-dev
複製代碼

@babel/preset-stage-0:同env

npm install @babel/preset-stage-0@7.0.0 --save-dev
複製代碼

@babel/runtime:同@babel/polyfill

npm install @babel/runtime@7.2.0 --save-dev
複製代碼

安裝了這些babel之後，須要有個文件進行標識，src目錄下新建.babelrc

{
    "presets":[
        ["@babel/preset-env", {
            "modules": false,
            "targets": {
              "browsers": ["> 1%", "last 2 versions", "ie >= 10"]
            },
            "useBuiltIns": "usage"
        }],
        "@babel/preset-react"
    ],
    "plugins":[
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties",{"loose":true}],
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-function-bind",
        "@babel/plugin-syntax-dynamic-import"
    ]
}
複製代碼

8.關於外部postcss.config.js的設置

由於你在loader 中引用了插件，可是沒有指明是誰的插件，須要制定一個ident，惟一標識。
src目錄下新建postcss.config.js文件

//自動添加css兼容屬性
module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 10 versions"
            ]
        })
    ]
};
複製代碼

npm install autoprefixer --save-dev
//，就是自動補全css前綴的東西
複製代碼

6、項目運行

是否是和我同樣看的很累呢，第一次寫文章不少地方沒有特別注意，但願下次能夠愈來愈好吧 **扯了那麼多，不看效果等於耍流氓！！！ 命令行執行npm run start/npm start 瀏覽器會自動彈出，建議你用谷歌(手動滑稽)
效果圖：

仍是特別的醜只有一行字且垂直居中不過我們主要目的不是爲了搭建webpack嘛！！！以爲此篇文章對你有用的畫不要忘了給個人git一個贊哦！！！

7、webpack運行原理

Webpack的運行流程是一個串行的過程，從開始到結束後回依次執行如下流程：

流程歸納:

1.初始化參數：從配置文件和shell語句中讀取與合併參數，得出最終的參數
2.開始編譯：用上一步獲得的參數初始化 Compiler 對象，加載全部配置的插件，執行對象的 run 方法開始執行編譯；
3.肯定入口：根據配置中的 entry 找出全部的入口文件；
4.編譯模塊：從入口文件出發，調用全部配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理；
5.完成模塊編譯：在通過第4步使用 Loader 翻譯完全部模塊後，獲得了每一個模塊被翻譯後的最終內容以及它們之間的依賴關係；
6.輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是能夠修改輸出內容的最後機會；
7.輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，把文件內容寫入到文件系統。

流程細節:

Webpack 的構建流程能夠分爲如下三大階段：

初始化：啓動構建，讀取與合併配置參數，加載 Plugin，實例化 Compiler。
編譯：從 Entry 發出，針對每一個 Module 串行調用對應的 Loader 去翻譯文件內容，再找到該 Module 依賴的 Module，遞歸地進行編譯處理。
輸出：對編譯後的 Module 組合成 Chunk，把 Chunk 轉換成文件，輸出到文件系統。

若是隻執行一次構建，以上階段將會按照順序各執行一次。但在開啓監聽模式下，流程將變爲以下：

若是你以爲個人文章還不錯的話，能夠給個star哦~，GitHub地址

下一步計劃是用Vue-router+Vuex+Vant寫一個簡易demo