Webpack 4打包vue文件的配置

仔細(xì)閱讀vuejs官網(wǎng)-教程-安裝-命令行工具那一塊
https://cn.vuejs.org/v2/guide...

官網(wǎng)已經(jīng)說(shuō)明了在NPM包的dist/目錄下有很多不同的Vue.js構(gòu)建版本。

而使用哪一個(gè)構(gòu)建版本取決去你引入vue的方式。我是使用ES6規(guī)范引入vue的，即使用import語(yǔ)法導(dǎo)入vue模塊，所以需要將vue的構(gòu)建版本設(shè)置為vue.esm.js。

如果你使用commonjs規(guī)范引入vue，即使用require語(yǔ)法導(dǎo)入vue模塊，那么就需要vue的構(gòu)建版本設(shè)置為vue.commonjs.js。

const webpack=require('webpack');

module.exports={
    entry:__dirname+'/src/main.js',
    output: {
        path:__dirname+'/public',
        filename:'bundle.js'
    },
    devtool: "none",
    devServer: {
        contentBase:'./public',
        host:'localhost',
        port:'8080',
        inline:true,
        historyApiFallback:true
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:'babel-loader',
                exclude: /node_modules/
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
                exclude: /node_modules/
            },
            {
                test:/\.vue$/,
                use:'vue-loader'
            }
        ]
    },
    // 還需要添加以下內(nèi)容
    resolve: {
        alias: {
            //確定vue的構(gòu)建版本
            'vue$':'vue/dist/vue.esm.js'
        },
        extensions: ['*','.js','.vue','.json']
    }
}

** resolve.alias簡(jiǎn)介

resolve.alias 配置項(xiàng)通過(guò)別名來(lái)把原導(dǎo)入路徑映射成一個(gè)新的導(dǎo)入路徑。例如使用以下配置：

// Webpack alias 配置
resolve:{
  alias:{
    components: './src/components/'
  }
}

當(dāng)你通過(guò) import Button from 'components/button' 導(dǎo)入時(shí)，實(shí)際上被 alias 等價(jià)替換成了 import Button from './src/components/button'。

以上 alias 配置的含義是把導(dǎo)入語(yǔ)句里的 components 關(guān)鍵字替換成 ./src/components/。

alias 還支持 $ 符號(hào)來(lái)縮小范圍到只命中以關(guān)鍵字結(jié)尾的導(dǎo)入語(yǔ)句：

resolve:{
  alias:{
    'react$': '/path/to/react.min.js'
  }
}

react$ 只會(huì)命中以 react 結(jié)尾的導(dǎo)入語(yǔ)句，即只會(huì)把 import 'react' 關(guān)鍵字替換成 import '/path/to/react.min.js'。

在vue-loader V15的版本中,需要在webpack.config.js中加入相應(yīng)的插件.具體做法如下:

1.在webpack.config.js的頭部引入插件:

const VueLoaderPlugin = require('vue-loader/lib/plugin');

2.在導(dǎo)出的配置中添加插件:

module.export = {
  ... //之前配置不變
  plugins: [
    new VueLoaderPlugin()
  ]
}

我做了個(gè)sample，可以給你參考下：https://github.com/hzsrc/vue-...

給webpack解析配置添加拓展:

{
    ...，
    resolve： {
        extensions: ['.js', '.json', '.vue']
    }
}