开发者社区> 刘俊杰liujj> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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;

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。
1101 0
前端技术—webpack 打包 js 文件(2) | 学习笔记
简介:快速学习前端技术—webpack 打包 js 文件(2)
0 0
前端技术—webpack 打包 css 文件 | 学习笔记
简介:快速学习前端技术— webpack 打包 css 文件
0 0
ts重点学习142-使用webpack打包ts文件笔记
ts重点学习142-使用webpack打包ts文件笔记
0 0
ts重点学习141-使用webpack打包ts文件
ts重点学习141-使用webpack打包ts文件
0 0
WebPack实战 WebPack打包Vue项目
WebPack实战 WebPack打包Vue项目
0 0
webpack 打包原理浅析及常见优化
对于很多前端小伙伴来说,webpack应该相当耳熟能详了,但是如果谈到其中的原理,我相信很多同學其實是很模糊的。然而,深入理解webpack的原理,并能熟练地利用其中的原理对项目进行优化,将是一名普通开发者迈向资深开发者不可或缺的一环。因此,本文就目前前端最为热门的打包工具webpack,对其作用、原理及优化进行一定程度的探讨,分析过程中引用了部分外部的资料,同时也加入了部分自己的见解,如有错误,欢迎大佬指出。
0 0
webpack打包library发布到npm
webpack打包library发布到npm
0 0
webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object
webpack打包vue项目报错:Cannot assign to read only property ‘exports‘ of object
0 0
webpack打包优化解决方案
webpack打包优化解决方案
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于webpack和npm的前端组件化实践
立即下载
从Web到Cloud App
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载