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;

相关文章
|
19天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
31 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
4天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
13 4
|
17天前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
52 0
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
47 3
|
2月前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
3月前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
3月前
|
JavaScript 前端开发
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
【Azure Developer】在App Service上放置一个JS页面并引用msal.min.js成功获取AAD用户名示例
|
3月前
|
JavaScript API 对象存储
|
3月前
|
JavaScript
js之三级联动示例
js之三级联动示例
44 1
|
3月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
45 0