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

時間 2019-11-12

標籤 webpack vue loader 配置完善简体版

原文原文鏈接

webpack 4+ vue-loader 配置css

寫的demo，clone下來後，npm run dev便可，(此demo並未加入router)html

可能會因爲版本問題，配置會有些許改動，暫時都是可用的vue

具體配置文件在webpack.config.jsnode

配置步驟的話能夠查看webpack官方文檔指南，很是詳細webpack

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

 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.jsongithub

 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 }