webpack打包vue單文件組件

一、vue單文件組件

①文件擴展名為 .vue 的 就是single-file components(單文件組件) 

②參考文檔：單文件組件

二、webpack加載第三方包

①項目中，如果需要用到一些第三方包，比如vue.js，jQuery.js，bootstrap.js等等，如果使用一般的方法，直接import加載使用，然后打包成一個bubdle.js文件的話，因為第三方包的體積過大，最終會造成bundle.js的文件過大，所以一般不打包第三方包，而是通過script標簽的方式把第三方資源引入到頁面（單純的引入是報錯或者沒有效果的），還需要通過以下配置，這里以jQuery為例

②下載第三方包，默認是安裝在node_modules文件夾下

npm install jquery

③在index.html頁面中引入資源（這里只是在測試階段需要這樣，實際項目上線的時候，src里的文件會在根目錄里，node_modules通過安裝生產環境依賴的目錄也是在根目錄里，或者可以使用配置虛擬內存，把之前webpack-dev-server的配置contentBase里的路徑直接改為 ./ ，這樣就會在根目錄開啟一個虛擬的內存運行打包后的index.html，所以最終這里還是得src="node_modules...."這樣寫）

    <!-- 注意：測試階段這里的路徑以最終打包目錄dist下的index.htmtl位置為准 -->
    <script src="../node_modules/jquery/dist/jquery.js"></script>

④配置webpack.config.js中的externals模塊

    externals:{
        // 這里配置的含義：當代碼中import jquery的時候，不會把jquery打包到bundle中，而是使用指定的全局中的jQuery對象
        // key是第三方包名稱，value是全局中的jQuery（$）對象
        jquery:'jQuery'
    },

⑤加載使用

⑥打包測試，打開dist里的index.html

npm run build

三、webpack打包vue單文件組件

①按照以上步驟，安裝配置vue的第三方包

npm install vue

    devServer:{
        // 配置webpack-dev-server的www目錄,配置虛擬內存
        contentBase:'./'
    },

    <div id="app"></div>
    <script src="node_modules/vue/dist/vue.min.js"></script>

　　externals:{
        // 加載第三方資源
        vue:'Vue'
    },

②安裝vue依賴vue-loader和vue-template-compiler

npm install --sav-dev vue-loader vue-template-compiler

③配置（注意：vue-loader15版本以后需要配置VueLoadPlugin）

// 該文件其實最終是要在node環境下執行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoadPlugin = require('vue-loader/lib/plugin')

// 導出一個具有特殊屬性配置的對象
module.exports = {
    entry:['babel-polyfill','./src/main.js'],/* 入口文件模塊路徑 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */
        filename:'bundle.js'/* 打包的結果文件名稱 */
    },
    devServer:{
        // 配置webpack-dev-server的www目錄,配置虛擬內存
        contentBase:'./'
    },
    plugins:[
        // 該插件可以把index.html打包到bundle.js文件所屬目錄，跟着bundle走
        // 同時也會自動在index.html中注入script引用鏈接，並且引用的資源名稱，也取決於打包的文件名稱
        new htmlWebpackPlugin({
            template:'./index.html'
        }),
        new VueLoadPlugin()
    ],
    externals:{
        // 加載第三方資源
        vue:'Vue'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    //注意：這里的順序很重要，不要亂了順序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,//排除掉node_module目錄
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env'], //轉碼規則
                        plugins:['transform-runtime']
                    }
                }
            },
            { test:/.vue$/,
                use:[
                    'vue-loader' ] }
        ]
    }
}

④測試

⑤打包運行(webpack-dev-server --open)

npm run dev

四、組件熱更新

①熱更新或者又叫熱重載，熱替換，就是組件在不刷新頁面的情況下被替換，可以參考vue文檔和webpack文檔

②配置

// 該文件其實最終是要在node環境下執行的
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoadPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')

// 導出一個具有特殊屬性配置的對象
module.exports = {
    entry:['babel-polyfill','./src/main.js'],/* 入口文件模塊路徑 */
    output:{
        path:path.join(__dirname,'./dist/'),/* 出口文件模塊所屬目錄，必須是一個絕對路徑 */
        filename:'bundle.js'/* 打包的結果文件名稱 */
    },
    devServer:{
        // 配置webpack-dev-server的www目錄,配置虛擬內存
        contentBase:'./',
        hot:true
    },
    mode:'development',
    plugins:[
        // 該插件可以把index.html打包到bundle.js文件所屬目錄，跟着bundle走
        // 同時也會自動在index.html中注入script引用鏈接，並且引用的資源名稱，也取決於打包的文件名稱
        new htmlWebpackPlugin({
            template:'./index.html'
        }),
        new VueLoadPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    externals:{
        // 加載第三方資源
        vue:'Vue'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    //注意：這里的順序很重要，不要亂了順序
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.(jpg|png|gif|svg)$/,
                use:[
                    'file-loader'
                ]
            },
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,//排除掉node_module目錄
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['env'], //轉碼規則
                        plugins:['transform-runtime']
                    }
                }
            },
            {
                test:/.vue$/,
                use:[
                    'vue-loader'
                ]
            }
        ]
    }
}

③測試運行：當修改vue單文件組件時，可以不刷新問修改html頁面

npm run dev

五、加載vue-router

①下載，默認位置在node_modules目錄

npm install vue-router

②引用資源

    <div id="app"></div>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.min.js"></script>

③配置

    externals:{
        // 加載第三方資源
        'vue':'Vue',
        'vue-router':'VueRouter'
    },

④在router.js文件中加載使用

⑤在main.js中配置路由對象，在App.vue中設置路由進口和出口

 

⑥運行測試

npm run dev