Webpack 4打包vue文件的配置

Question

在不使用vue-cli的情况下，使用webpack 4打包vue文件除了vue-loader，还需要配置什么？
使用vue-cli里webpack-simple模板下的webpack配置依然无法识别.vue文件，问题出在哪里

module:{
        rules:[
            {
                test:/\.vue$/,
                use:'vue-loader'
            }
        ]
    }

以下是目前项目中webpack的全部配置项

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:/\.styl$/,
                use:['style-loader','css-loader','stylus-loader'],
                exclude: /node_modules/
            },
            {
                test:/\.vue$/,
                loader:'vue-loader
            }
        ]
    }
}

Answer 1

在vue-loader V15的版本中,需要在webpack.config.js中加入相应的插件.具体做法如下:

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

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

2.在导出的配置中添加插件:

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

Answer 2

仔细阅读vuejs官网-教程-安装-命令行工具那一块
https://cn.vuejs.org/v2/guide...

官网已经说明了在NPM包的dist/目录下有很多不同的Vue.js构建版本。

而使用哪一个构建版本取决去你引入vue的方式。我是使用ES6规范引入vue的，即使用import语法导入vue模块，所以需要将vue的构建版本设置为vue.esm.js。

如果你使用commonjs规范引入vue，即使用require语法导入vue模块，那么就需要vue的构建版本设置为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'
            }
        ]
    },
    // 还需要添加以下内容
    resolve: {
        alias: {
            //确定vue的构建版本
            'vue$':'vue/dist/vue.esm.js'
        },
        extensions: ['*','.js','.vue','.json']
    }
}

** resolve.alias简介

resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置：

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

当你通过 import Button from 'components/button' 导入时，实际上被 alias 等价替换成了 import Button from './src/components/button'。

以上 alias 配置的含义是把导入语句里的 components 关键字替换成 ./src/components/。

alias 还支持 $ 符号来缩小范围到只命中以关键字结尾的导入语句：

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

react$ 只会命中以 react 结尾的导入语句，即只会把 import 'react' 关键字替换成 import '/path/to/react.min.js'。

Answer 3

我做了个sample，可以给你参考下：https://github.com/hzsrc/vue-...

Answer 4

给webpack解析配置添加拓展:

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