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;

相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
64 3
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
46 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
21天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
19 4
|
2月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
30天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
138 0
|
30天前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
39 0
|
1月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
1月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
84 0
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
52 3
|
2月前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js