一、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-demodist
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)} ]
});