webpack4构建vue项目

安装 webpack、vue

npm i webpack webpack-cli -D

npm i vue vue-router -S

在项目根目录创建build文件夹，然后创建3个分别是webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js文件,存放基础配置与开发、生产环境的配置。

项目目录如下图：

webpack4构建vue项目

打开src/router/index.js 文件，配置”登录页面“路由：

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 
 4 Vue.use(VueRouter)
 5 
 6 import login from '../views/login/login.vue'
 7 
 8 export default new VueRouter({
 9     routes: [{
10         path: '/',
11         name: 'login',
12         component: login,
13         meta: {
14             title: '登录'
15         }
16     }]
17 })

src/index.html添加如下代码：

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset='utf-8'>
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="renderer" content="webkit|ie-comp|ie-stand">
 7     <title></title>
 8 </head>
 9 <body>
10     <div  v-cloak>
11         <router-view></router-view>
12     </div>
13 </body>
14 </html>

src/index.js添加如下代码：

1 import Vue from 'vue'
2 import router from './router/index.js'
3 
4 new Vue({
5     el: '#app',
6     router
7 })

src/build/webpack.base.conf.js配置代码如下：

 1 const webpack = require('webpack')
 2 const path = require('path')
 3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 4 const HtmlWebpackPlugin = require('html-webpack-plugin')
 5 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 6 
 7 const isDev = process.env.NODE_ENV === 'production'
 8 
 9 let pluginsConfig = [
10     new VueLoaderPlugin(),
11     new HtmlWebpackPlugin({
12         title: 'my App',
13         template: path.join(__dirname, '../src/index.html')
14     }),
15     new webpack.DefinePlugin({
16         'process.env': {
17             'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
18         }
19     })
20 ]
21 if (!isDev) {
22     pluginsConfig = pluginsConfig.concat(new MiniCssExtractPlugin({
23         filename: "css/[name]_[contenthash].css"
24     }))
25 }
26 
27 module.exports = {
28     mode: process.env.NODE_ENV || 'production',
29     entry: path.join(__dirname, '../src/index.js'),
30     output: {
31         filename: 'bundle.js',
32         path: path.join(__dirname, '../dist')
33     },
34     module: {
35         rules: [{
36                 test: /\.vue$/,
37                 loader: 'vue-loader'
38             },
39             {
40                 test: /\.scss$/,
41                 use: [
42                     isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
43                     {
44                         loader: 'css-loader',
45                         options: {
46                             modules: true,
47                             localIdentName: '[local]_[hash:base64:8]'
48                         }
49                     },
50                     'sass-loader'
51                 ]
52             },
53             {
54                 test: /\.(png|jpg|gif)$/,
55                 loader: 'url-loader?name=images/[name]-[contenthash:5].[ext]&limit=2000'
56             }, {
57                 test: /\.js$/,
58                 loader: 'babel-loader?cacheDirectory',
59                 exclude: '/node_modules/',
60                 include: path.resolve(__dirname, '../src')
61             }
62         ]
63     },
64     plugins: pluginsConfig,
65     resolve: {
66         alias: {
67             'vue$': 'vue/dist/vue.esm.js'
68         }
69     }
70 }

View Code