使用 webpack 4 配置 Vue.js 项目

时间:2020-12-22 12:56:25


一、Webpack 4 的基本安装  
 
执行控制台命令的两个方法:
方法一:在 Windows资源管理器中创建并进入文件夹后,按键盘 Shift + 鼠标右键,选择
“在此处打开 PowerShell 窗口”(Win 10)或 “在此处打开命令窗口”(Win 7),即可在
打开的窗口执行命令
方法二:在 Windows资源管理器中创建文件夹,启动 WebStorm后打开该文件夹,点窗口左
下方的 Terminal(中文意思 是终端,用来执行命令的),即可执行命令。
 
 
1、创建项目文件:webpack-demo
mkdir webpack-demo  
cd webpack-demo
 
2、NPM 初始化项目package.json,进入项目文件夹,并在命令提示符下执行命令:
npm init  
或者全部使用默认值:
npm init -y
 
3、在本地安装 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
 
4、在项目中创建index.html、文件夹 ./src 和 JS 文件 ./src/index.js,如下:
  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js
 
编辑文件 src/index.js
console.log("Hello World!");
 
5、打包 js 文件,执行构建命令:
D:\webpack-demo>npx webpack
 
屏幕输出类似如下信息:
Hash: de6f43f472db75a3678e
Version: webpack 4.21.0
Time: 360ms
Built at: 2018-10-21 15:41:12
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js [0] ./src/index.js 28 bytes {0} [built]
 
命令执行成功后在,在项目中会添加一个 dist文件夹,以及 dist/mian.js 文件
 
6、编辑index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack 4 demo</title>     
</head>
<body>
 
<script src="dist/main.js"></script>
</body>
</html>
 
保存,用浏览器打开该文件,F12 打开浏览器控制台检查是否有输出结果。
 
使用一个配置文件
 
在 webpack 4 中,可以无须任何配置使用,默认的入口是 src/index.js,默认的出
口是:dist/main.js,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然
要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创
建一个 webpack.config.js 取代以上使用 CLI 选项方式的配置文件,内容如下所示:
path = require('path');
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};
 
 
使用 NPM 脚本执行构建命令
考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便,我们可以设置一个快捷方
式。在 package.json 添加一个 npm 脚本(npm script):
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",     "build": "webpack"         // 添加这一行
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
  }
}
 
现在,可以使用 npm run build 命令,来替代我们之前使用的 npx 命令。
D:\webpack-demo>npm run build
 
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
Hash: 49dbf2f0376708b5b0d8
Version: webpack 4.21.0
Time: 102ms
Built at: 2018-10-21 15:54:47
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 28 bytes {0} [built]
 
二、最小的 Vue.js 配置
1、安装生产阶段依赖模块和开发阶段依赖模块
npm install --save vue
 
2、修改webpack.config.js 文件
const path = require('path');
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [
            '.js'
        ],
        alias: {
            vue: 'vue/dist/vue.js'
        }     }
};
 
3、修改index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack 4 demo</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script src="dist/main.js"></script>
</body>
</html>
 
4、修改index.js文件
import Vue from 'vue';
 
var vue = new Vue({
    el: '#app',
    data: {
        message: 'Hello World'
    }
});
 
6、执行构建命令: npm run build
D:\webpack-demo>npm run build
 
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
 
Hash: 0d271c85cebc3d506967
Version: webpack 4.21.0
Time: 2740ms
Built at: 2018-10-21 16:25:18
  Asset     Size  Chunks             Chunk Names
main.js  109 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] ./src/index.js 121 bytes {0} [built]
    + 4 hidden modules
 
7、在浏览器打开index.html 文件,检查运行结果 三、单文件组件与 vue-loader  
1、安装开发阶段的依赖(使用Babel 6)
npm install --save-dev  vue-loader vue-template-compiler babel-core
babel-loader babel-preset-env
 
npm install --save-dev @babel/core @babel/cli @babel/preset-env
 
安装 polyfill(生产阶段依赖,用于对 IE 浏览器等提供 ES2015+ 环境的支持)
npm install --save @babel/polyfill
 
安装后,package.json 文件内容如以下所示:
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "vue": "^2.5.17"
  }
}
 
2、在项目中添加文件 .babelrc,内容如下:
{
  "presets": [
    [
      "env",       {
        "targets": {
          "browsers": ["last 2 versions", "IE 11"]
        },
        "modules": false,
        "useBuiltIns": true
      }
    ]
  ]
}
 
3、修改webpack.config.js 文件,内容如下所示:
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    // 模块
    module: {
        rules: [
            {
                test:/\.vue$/,
                use:[
                    {
                        loader: "vue-loader",
                    },
                ]
            },
            {
                /* 用 babel来解析 js文件并把 es6 的语法转换成浏览器认识的语法
*/
                test:/\.js$/,
                /* 排除模块安装目录的文件 */
                exclude:/node_modules/,
                use:[
                    {
                        loader:'babel-loader',
                    },
                ]
            }
        ]     },
    resolve: {
        modules:[path.join(__dirname,'src'),'node_modules'],
        extensions: [
            '.js','.vue'
        ],
        //给vue 配置别名,import 引入不用写易长串
        alias: {
            // vue: 'vue/dist/vue.js'
            'vue$':'vue/dist/vue.esm.js'
        }
    },
    //插件,用于生产模板和各项功能
    plugins: [
        new VueLoaderPlugin()
    ],
};
 
4、修改 index.html,内容如以下所示:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack 4 demo</title>
</head>
<body>
<div id="app">
Loading...
</div>
<script src="dist/main.js"></script>
</body>
</html>
 
5、修改./src/index.js 文件如以下内容:
import Vue from 'vue';
import App from './app.vue';
 
var vue = new Vue({
    el: '#app',
    render: h => h(App)
});
 
6、添加单文件组件文件./src/app.vue,src 文件夹上右键 -> new -> Vue Component,
内容如以下所示:
<template>
    <div id="app">         {{msg}}
    </div>
</template>
 
<script>
    export default {
        name: "app",
        data:function () {
            return{
                msg:'welcome to your vue.js App'
            }
        }
    }
</script>
 
<style scoped>
 
</style>
 
7、执行构建命令:npm run build
D:\webpack-demo>npm run build
 
> webpack-demo@1.0.0 build D:\webpack-demo
> webpack
 
Hash: c23b2f56ea24497d680a
Version: webpack 4.21.0
Time: 1482ms
Built at: 2018-10-21 18:13:39
  Asset      Size  Chunks             Chunk Names
main.js  91.5 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./node_modules/vue-loader/lib??vue-loader-
options!./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang
=css& 19 bytes {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[6] ./src/app.vue?vue&type=style&index=0&id=5ef48958&scoped=true&lang=css
& 312 bytes {0} [built]
[7] ./src/index.js + 6 modules 4.86 KiB {0} [built]
    | ./src/index.js 143 bytes [built]
    | ./src/app.vue 1.14 KiB [built]
    | ./src/app.vue?vue&type=template&id=5ef48958&scoped=true& 207 bytes
[built]
    | ./src/app.vue?vue&type=script&lang=js& 332 bytes [built]
    | ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-
loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=template
&id=5ef48958&scoped=true& 291 bytes [built]
    | ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-
loader-options!./src/app.vue?vue&type=script&lang=js& 142 bytes [built]
    |     + 1 hidden module
    + 4 hidden modules
 
8、在浏览器中运行index.html 文件,检查结果。
 
四、使用 webpack-dev-server构建本地服务器
1、安装webpack-dev-server、html-webpack-plugin 到开发阶段依赖
npm install --save-dev webpack-dev-server html-webpack-plugin
 
2、修改webpack.config.js 文件
在开头添加webpack 和 html-webpack-plugin 引用
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
 
在 module.exports内添加以下两个小节
//插件,用于生产模板和各项功能
plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebPackPlugin({
        template: 'index.html',
        inject: true,
    }),
],
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress:true,
    historyApiFallback: true,
    inline: true,
    hot: true
},
 
3、修改package.json 文件,在"scripts"小节内添加 "start" 行,如下所示
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode development",
  "start": "webpack-dev-server --inline"   // 添加这一行
},
 
4、在命令提示符或WebStorm 的终端中输入以下命令即可启动本地调试服务器:
npm run start
 D:\webpack-demo>npm run start
 
> webpack-demo@1.0.0 start D:\webpack-demo
> webpack-dev-server --inline
 
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from D:\webpack-demo\dist
i 「wds」: 404s will fallback to /index.html
i 「wdm」: Hash: 65e7921c6a791f244a0f
Version: webpack 4.21.0
Time: 2300ms
Built at: 2018-10-24 20:44:57
     Asset       Size  Chunks             Chunk Names
   main.js   1010 KiB    main  [emitted]  main
 0.main.js   17.4 KiB       0  [emitted]
index.html  271 bytes          [emitted]
 
 
本地调试服务器启动后,在浏览器的地址栏输入:http://localhost:8080/,即可查看项
目运行的结果,同时服务器会监控各个页面的修改并反馈到网页中。
 
五、在 Vue.js中使用Bootstrap(这里只使用 CSS)进行
1、添加Bootstrap 4 到生产阶段依赖
npm install bootstrap -S
 
2、安装处理CSS的加载器到开发阶段依赖
npm i style-loader css-loader -D
 
3、修改webpack.config.js 文件,在module 的rules小节中添加以下内容:
{
    test:/\.css$/,
    use:['style-loader','css-loader'],
}
 
4、在入口的index.js 文件中添加css 的引用
import Vue from 'vue';
import App from './app';
import 'bootstrap/dist/css/bootstrap.css';  // 添加样式文件的引用
 
Vue.config.productionTip = false;  // 作用是阻止 vue 在启动时生成生产提示 var vue = new Vue({
    el: '#app',
    render: h => h(App)
}).$mount('#app');
 
完成以上设置后,即可使用 bootstrap 样式了。
 
六、使用前端路由vue-router
1、安装vue-router 到生产阶段依赖
npm install vue-router -S
 
2、在src文件夹中新建 component 文件夹,
3、在component文件夹中添加单文件组件home.vue,内容如下所示:
<template>
    <div>This is home vue</div>
</template>
 
<script>
    export default {
        name: "home"
    }
</script>
 
<style scoped>
 
</style>
 
4、在component文件夹中添加单文件组件about.vue,内容如下所示
<template>
    <div>关于页面。</div>
</template>
 
<script>
    export default {
        name: "about"
    }
</script>
 
<style scoped>
 
</style>
 
5、添加路由信息文件src/router.js,内容如以下所示:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './component/home.vue';  
Vue.use(Router);
export default new Router({
    base: process.env.BASE_URL,
    // 下面这个单词要注意,是 routes(没有 r), 不是 routers
    routes: [
        {path: '/', name: 'home', component: Home},
        {path: '/about', name: 'about', component: (resolve) =>
require(['./component/about.vue'], resolve)}
    ]
});
 
6、修改src/index.js 文件,
import Vue from 'vue';
import App from './app';
import router from 'router'      // 导入上一步的路由信息
import 'bootstrap/dist/css/bootstrap.css';
 
Vue.config.productionTip = false;  // 作用是阻止 vue 在启动时生成生产提示
var vue = new Vue({
    el: '#app',
    router: router,      // 指定路由
    render: h => h(App)
}).$mount('#app');
 
 
7、修改app.vue 文件,如以下内容所示:
<template>
    <div id="app" class="container">
        <div class="row">
            <div id="nav" class="col-3">
                <ul>
                    <li>
                        <router-link to='/'>Home</router-link>
                    </li>
                    <li>
                        <router-link to='/about'>About</router-link>
                    </li>
                </ul>
            </div>
            <div class="col-9">
                <router-view/>
            </div>
        </div>
    </div>
</template>  
<script>
    export default {
        name: "app",
    }
</script>
 
<style scoped>
 
</style>
 
8、启动本地调试服务器
npm run start
 
9、在浏览器中输入地址:http://localhost:8080,查看运行结果
 
说明:
1、使用vue-router 的时候需要webpack-dev-server 的支持,不然地址栏无法进行路由
的匹配;
2、vue-router默认的路由会在地址栏中显示有一个 # 的符号,这个是因为使用的是hash
mode,如果要去掉#/,改成 history模式就可以了,具体配置在router 中添加一行 mode:
'history', 如下:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './component/home.vue';
 
Vue.use(Router);
export default new Router({
    mode: 'history',     // history 模式
    base: process.env.BASE_URL,
    // 下面这个单词要注意,是 routes(没有 r), 不是 routers
    routes: [
        {path: '/', name: 'home', component: Home},
        {path: '/about', name: 'about', component: (resolve) =>
require(['./component/about.vue'], resolve)}     ]
});