webpack 4+ vue-loader 配置

webpack 4+ vue-loader 配置

写的demo,clone下来后,npm dev即可,

可能会由于版本问题,配置会有些许改动,暂时都是可用的

具体配置文件在webpack.config.js

配置步骤的话可以查看webpack官方文档指南,非常详细

 1 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
 3 const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
 4 const path = require(‘path‘)
 5 const webpack = require(‘webpack‘)
 6
 7 function join(...args) { // ...args 出现在参数中叫做 rest 参数,它是把所有剩余参数放入一个数组
 8   return path.join(__dirname, ...args) // 出现在非函数参数的位置,...args 表示展示操作符,表示将数组展开,元素一个一个的摆放到这里
 9 }
10
11 module.exports = {
12   mode: "development",//可提高编译速度
13   devtool: ‘inline-source-map‘,
14   devServer:{
15     contentBase:‘./dist‘,
16     hot:true
17   },
18   entry: join("./src/main.js"),
19   output: {
20     path: join(__dirname, "dist"),
21     filename: "bundle.js"
22   },
23   plugins: [
24     new VueLoaderPlugin(),//https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE
25     new webpack.NamedModulesPlugin(),
26     new webpack.HotModuleReplacementPlugin(),
27     new CleanWebpackPlugin([‘dist‘]),
28     new HtmlWebpackPlugin({
29       template: join(‘./index.html‘),
30     })
31   ],
32   module: {
33     rules: [{
34         test: /\.text$/,
35         use: [‘raw-loader‘]
36       },
37       {
38         test: /\.css/,
39         use: [
40           ‘style-loader‘,
41           ‘css-loader‘
42         ]
43       }, {
44         test: /\.(png|svg|jpg|gif)$/,
45         use: [‘file-loader‘]
46       }, {
47         test: /\.(woff|woff2|eot|ttf|otf)$/,
48         use: [‘file-loader‘]
49       }, {
50         test: /\.less$/,
51         use: [
52           ‘style-loader‘,
53           ‘css-loader‘,
54           ‘less-loader‘ // less-loader 依赖于 less
55         ]
56       },
57       {
58       test: /\.js$/,
59       exclude: /(node_modules|bower_components)/,
60       use: {
61         loader: ‘babel-loader‘,
62         options: {
63           presets: [‘env‘]//注意版本问题 https://www.npmjs.com/package/babel-loader
64         }
65       }
66     },{
67       test:/\.vue$/,
68       use:[‘vue-loader‘]// 依赖于 vue-template-compiler,需要额外安装
69     }
70     ]
71   },
72
73 }

用到的包及版本package.json

 1 {
 2   "name": "webpackdemo",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "test": "echo \"Error: no test specified\" && exit 1",
 8     "watch": "webpack --watch",
 9     "build": "webpack",
10     "predev":"npm install",
11     "dev": "webpack-dev-server --open"
12   },
13   "author": "",
14   "license": "ISC",
15   "devDependencies": {
16     "babel-core": "^6.26.3",
17     "babel-loader": "^7.1.5",
18     "babel-preset-env": "^1.7.0",
19     "clean-webpack-plugin": "^0.1.19",
20     "css-loader": "^1.0.0",
21     "file-loader": "^1.1.11",
22     "html-webpack-plugin": "^3.2.0",
23     "less": "^3.7.0",
24     "less-loader": "^4.1.0",
25     "raw-loader": "^0.5.1",
26     "style-loader": "^0.21.0",
27     "vue-loader": "^15.2.4",
28     "vue-template-compiler": "^2.5.16",
29     "webpack": "^4.16.0",
30     "webpack-cli": "^3.0.8",
31     "webpack-dev-server": "^3.1.4"
32   },
33   "dependencies": {
34     "vue": "^2.5.16"
35   }
36 }

这里有个问题

main.js文件

https://cn.vuejs.org/v2/guide/installation.html

官方文档中有对各种vue版本的解释,使用场景

这里会涉及到使用template加载组件还是render形式

原文地址:https://www.cnblogs.com/herewego/p/9296519.html

时间: 2024-10-30 10:33:43

webpack 4+ vue-loader 配置的相关文章

webpack构建vue项目(配置篇)

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

webpack打包vue配置

/* 引入操作路径模块和webpack */ var path = require('path'); var webpack = require('webpack'); module.exports = { /* 输入文件 */ entry: { index:'./src/main.js' }, output: { /* 输出目录,没有则新建 */ path: path.resolve(__dirname, './dist'), /* 静态目录,可以直接从这里取文件 */ publicPath:

vue+vux+es6+webpack移动端常用配置步骤

1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = require('vux-loader')把第一个module.exports赋值变量let webpackConfig ={里面代码不动}然后这个放在最底部去 module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui', 'pr

基于webpack和vue.js搭建开发环境

前言 在对着产品高举中指怒发心中之愤后,真正能够解决问题的是自身上的改变,有句话说的好:你虽然改变不了全世界,但是你有机会改变你自己.秉承着“不听老人言,吃亏在眼前”的优良作风,我还是决定玩火自焚. 问题所在 之前的项目总结为以下内容: 1.AMD模块规范开发,使用requirejs实现,使用rjs打包,最终导致的结果是,输出的项目臃肿,肿的就像一坨狗不理……不忍直视2.使用gulp进行打包,这一点貌似没有可吐槽的地方,毕竟都是被grunt折磨过来的……3.数据的渲染使用模板引擎,这就意味着你要

基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)

人类的发展得益于对追求不断的提升,在能活着的基础上是否要活得潇洒一点,技术的发展亦如是.在公司作为一个最最最最最最最底层的搬砖码农,经历了两个版本的铸(zhe)炼(mo)之后,我痛下决心今后一定要:…………..一定要和产品惺(shi)惺(bu)相(liang)惜(li). 开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实践的过程中要去不断访问的5

webpack配合vue.js实现完整的单页面demo

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的服务器在国外,可能我们下载的过程会比较慢,所以建议用阿里的镜像cnpm安装,10分钟实时更新一次npm的镜像.具体的下载配置参考阿里的cnpm官网.本文章只是和大家探讨怎么利用webpack配合vue.js做一个单页面应用,具体关于vue里面的内容怎么写并不在本篇文章的介绍范围. 1. 定义我们de

webpack打包vue -->简易讲解

### 1. 测试环境: 推荐这篇文章:讲的很细致 https://www.cnblogs.com/lhweb15/p/5660609.html #### 1. webpack.config.js自行安装 ```javascript { "name": "vuetest", "version": "1.0.0", "description": "", "main":

使用webpack搭建vue开发环境

最近几天项目上使用了vue.js作为一个主要的开发框架,并且为了发布的方便搭配了webpack一起使用.CSS框架使用的是vue-strap(vue 对bootstrap控件做了封装)这篇文章主要总结一下具体搭建的过程,和途中遇到的一些问题的解决办法 主要用到的工具 Vue webpack vue-strap vue-router 搭建步骤 1. 首先建立项目的目录结构 demo_project/ dist/ webpack生成的文件 src/ 源代码文件 img/ 图片文件 css/ css文

monaco editor + vue的配置

monaco editor是vscode的御用编辑器. 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性. 夸了这么多,这里只说它一个问题: 这货和vue不兼容. 解决这个问题很简单,使用vue-monaco-editor即可,可以通过npm安装. npm install vue-monaco-editor --save-dev 现在问题又来了 这货文档有问题的,如下: 这里写了默认的srcPath是"",也就是本地的意思 并没有.

vue 路由配置

11.2 新增问题: 函数触发路由,采用两种方式.第一种router-link.第二种this.$router.push({path:'/address'}) 两种方式都可以跳转,但是第二种方式,触发后,原先绑定的CSS样式,无法通过 false 来取消. 然后吃完饭回来,我就发现我傻了,我是通过点击来触发事件,点击后,页面都跑了,我当然看不到样式改变啊. 所以老老实实用 router-link吧. <router-link> 比起写死的 <a href="..."&