webpack 4+ vue-loader 配置

 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:true17 ??},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%AE25 ????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 依赖于 less55 ????????]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-loader64 ????????}65 ??????}66 ????},{67 ??????test:/\.vue$/,68 ??????use:[‘vue-loader‘]// 依赖于 vue-template-compiler,需要额外安装69 ????}70 ????]71 ??},72 73 }

 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 }