摘要：四配置配置規(guī)則放在的數(shù)組里，每個(gè)是一個(gè)對(duì)象，是正則匹配，匹配文件后綴名，是要用是數(shù)組是所需要的是要加載哪些文件，是忽略掉哪些文件。實(shí)現(xiàn)解析，用會(huì)在寫入在文件頂端導(dǎo)入中加入插件。

最近研究webpack略有小成，特此寫篇博客。雖然webpack有官網(wǎng)api,但是個(gè)人認(rèn)為webpack api一點(diǎn)都不人性化，
不自己研究研究，根本看不懂。今天先從寫webpack-dev-server開始。webpack-dev-server的作用就是可以在
前端自己起一個(gè)服務(wù)，不用依托nginx,或者express等，更爽的是它可以實(shí)現(xiàn)實(shí)時(shí)更新，不用你去不停的F5刷新瀏
覽器。廢話不多說(shuō)，下面開始正文：

一、項(xiàng)目目錄結(jié)構(gòu)

    webpack
        build
            webpack.pro.conf.js
        src
            js
            css
            img
        index.html
        package.json
        package-lock.json 
         

二、安裝需要的包

npm install webpack wepback-cli webapck-dev-server html-webpack-plugin --save-dev

 我這里是"webpack": "^4.16.2"  "webpack-cli": "^3.1.0"  "webpack-dev-server": "^3.1.5" 

 "html-webpack-plugin": "^3.2.0"
 

webpack4不僅要裝webpack,還有webpack-cli，webpack-dev-server是我們用來(lái)啟動(dòng)本地服務(wù)的包，html-webpack-plugin

是webpack里的插件，可以自定義我們的首頁(yè)，具體后面說(shuō)。

三、webpack.pro.conf.js文件代碼

    var path = require("path");
    var webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        mode:"development",
        entry:{
            app:"./src/js/main.js"
        },
        output:{
            filename: "bundle.js",
            path:path.resolve(__dirname,"../dist"),
            //path.resolve是nodejs里的方法，具體看nodejs api
        },
         devServer:{
            contentBase:false,
            //我這里沒(méi)有設(shè)置contentBase，個(gè)人研究contentBase必須指向存在的bundle.js文件所在目錄，因?yàn)檫@里是
            //開發(fā)模式，所以dist目錄并不存在，所以用false.
            host:"localhost",
            port:"8888",
            inline:true,//webpack官方推薦
            watchOptions: {
                aggregateTimeout: 2000,//瀏覽器延遲多少秒更新
                poll: 1000//每秒檢查一次變動(dòng)
            },
            compress:true,//一切服務(wù)都啟用gzip 壓縮
            historyApiFallback:true,//找不到頁(yè)面默認(rèn)跳index.html
            hot:true,//啟動(dòng)熱更新，必須搭配new webpack.HotModuleReplacementPlugin()插件
            open:true,
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template:"index.html",
                title:"index",
                inject: true
            }),
            // new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
            // new webpack.NoEmitOnErrorsPlugin()
        ]
    }   

HtmlWebpackPlugin插件template是要采用的模板，模板就是用選擇的html文件，去生成開發(fā)所需的html,這個(gè)模板是可以配置的，

比如index.html代碼如下：
    
        
        
        
            
            
            
            
        
        
            

        
        
例如titile的值，取自HtmlWebpackPlugin里的title,更多信息看HtmlWebpackPlugin官網(wǎng)。而且啟動(dòng)服務(wù)之后，這個(gè)插件會(huì)幫我們
在head,body中自動(dòng)引入js,這是通過(guò)inject來(lái)設(shè)置的。

接下來(lái)配置loader,loader是用來(lái)解析es6,stylus,less等等,因?yàn)檫@些瀏覽器識(shí)別不了，這些loader可以幫我們打包成瀏覽器可識(shí)別        
的方式。

四、配置loader

    module: {
        rules: [
            {
                test:/.js$/,
                use:[
                    "babel-loader"
                ],
                include:path.resolve(__dirname,"../src"),
                exclude:path.resolve(__dirname,"../node_modules")
            },
            {
                test: /.(png|jpg|gif)$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            limit:10000000
                        }
                    }
                ]
            },
            {
                test:/.css$/,
                use:[
                    {
                        loader: "style-loader"
                    },
                    {
                        loader:"css-loader"
                    }
                ]
            },
            {
                test:/.styl/,
                use:[
                    {
                        loader: "style-loader"
                    },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"stylus-loader"
                    }
                ]
            },
            {
                test:/.vue/,
                use:[
                    {
                        loader:"vue-loader"
                    }
                ]
            }
        ]
    },

   

配置規(guī)則放在rules的數(shù)組里，每個(gè)loader是一個(gè)對(duì)象，test是正則匹配，匹配loader文件后綴名，use是要用loader是數(shù)組,loader是所
需要的loader,include是要loader加載哪些文件，exclude是忽略掉哪些文件。options可以對(duì)插件配置額外參數(shù)。每種文件格式可能需要
多個(gè)loader,就需要配置多個(gè)loader,而且這些loader是有順序的，從下往上。比如.styl（stylus）文件，先把stylus解析成css,
css文件結(jié)果style-loader插入html中。

實(shí)現(xiàn)vue解析，用vue-loader
npm install vue-loader --save-dev (--save-dev會(huì)在package.json devDependencies寫入)
在文件頂端導(dǎo)入const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins中加入new VueLoaderPlugin()插件。

五、 配置resolve

    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "vue$":"vue/dist/vue.esm.js",
            "@":path.resolve(__dirname,"../src")
        }
    }
    

extensions可以免去導(dǎo)入文件的后綴，例如： import vue from "vue.js" 改成 import vue from "vue"
alias可重新配置模塊路徑，可以省去很長(zhǎng)的寫法。

今天就到這里！互相交流，多多指教！我還會(huì)回來(lái)的！