webpack 4+ vue-loader 配置 (完善中...)

webpack 4+ vue-loader 配置

写的demo，clone下来后，npm run dev即可，(此demo并未加入router)

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

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

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

https://www.webpackjs.com/guides/

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const path = require('path')
 const webpack = require('webpack')

 function join(...args) { // ...args 出现在参数中叫做 rest 参数，它是把所有剩余参数放入一个数组
   return path.join(__dirname, ...args) // 出现在非函数参数的位置，...args 表示展示操作符，表示将数组展开，元素一个一个的摆放到这里
 }

 module.exports = {
   mode: "development",//可提高编译速度
   devtool: 'inline-source-map',
   devServer:{
     contentBase:'./dist',
     hot:true
   },
   entry: join("./src/main.js"),
   output: {
     path: join(__dirname, "dist"),
     filename: "bundle.js"
   },
   plugins: [
     new VueLoaderPlugin(),//https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E9%85%8D%E7%BD%AE
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new CleanWebpackPlugin(['dist']),
     new HtmlWebpackPlugin({
       template: join('./index.html'),
     })
   ],
   module: {
     rules: [{
         test: /\.text$/,
         use: ['raw-loader']
       },
       {
         test: /\.css/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }, {
         test: /\.(png|svg|jpg|gif)$/,
         use: ['file-loader']
       }, {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: ['file-loader']
       }, {
         test: /\.less$/,
         use: [
           'style-loader',
           'css-loader',
           'less-loader' // less-loader 依赖于 less
         ]
       },
       {
       test: /\.js$/,
       exclude: /(node_modules|bower_components)/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['env']//注意版本问题 https://www.npmjs.com/package/babel-loader
         }
       }
     },{
       test:/\.vue$/,
       use:['vue-loader']// 依赖于 vue-template-compiler,需要额外安装
     }
     ]
   },

 }

用到的包及版本package.json

 {
   "name": "webpackdemo",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "webpack --watch",
     "build": "webpack",
     "predev":"npm install",
     "dev": "webpack-dev-server --open"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-env": "^1.7.0",
     "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^1.0.0",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.7.0",
     "less-loader": "^4.1.0",
     "raw-loader": "^0.5.1",
     "style-loader": "^0.21.0",
     "vue-loader": "^15.2.4",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.16.0",
     "webpack-cli": "^3.0.8",
     "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
     "vue": "^2.5.16"
   }
 }

这里有个问题

main.js文件

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

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

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