一、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 ,
}
</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)} ]
});
相关文章：