Vue.js的webpack.config.js示例-阿里云开发者社区

开发者社区> 开发与运维> 正文

Vue.js的webpack.config.js示例

简介:

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

const ExtractTextPlugin = require("extract-text-webpack-plugin");

var config = {

// devtool: 'inline-source-map',
mode: "production",
entry: {
    main: './main'
},
output: {
    path: path.join(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'main.js'
},
devServer: {
    compress: false,
    proxy: {
        '/api': {
            //要访问的跨域的域名
            target: 'http://localhost/api',
            changeOrigin: true,
            secure: false,
            pathRewrite: {
                '^/api': ''
            }
        }
    }
},
module: {
    rules: [{
            test: /\.vue$/,
            use: [{
                    loader: "vue-loader",
                    options: {
                        loaders: {
                            css: ExtractTextPlugin.extract({
                                use: "css-loader",
                                fallback: "vue-style-loader"
                            })
                        }
                    }
                },
                {
                    loader: "iview-loader",
                    options: {
                        prefix: false
                    }
                }
            ]
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /iview\/.*?js$/,
            loader: "babel-loader"
        },
        {
            test: /iview.src.*?js$/, //为了兼容ie,否则在ie浏览器无法预览iview组件
            use: [{
                loader: "babel-loader"
            }]
        },
        {
            //此处配置为iview的注意点,如果不配置的话 无法再Js文件中加载iview.css文件;其次如果使用url-loader无法加载的话,会使用file-loader进行文件加载
            test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
            loader: "url-loader?limit=1024"
        },
    ]
},
plugins: [
    new VueLoaderPlugin(),
    new ExtractTextPlugin("styles.css"),
]

}
module.exports = config;

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章