🔥手擼JS系列:手把手用webpack4搭建vue/react環境

時間  2021-08-12
標籤 javascript css html vue html5 java node react webpack css3 欄目 JavaScript 简体版
原文   原文鏈接

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程