webpack 4+ vue-loader 配置

Posted 2020-12-03 xxdw8

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形式