创建项目
mkdir my-vue
cd my-vue
// 生成 package.json
npm init
安装 webpack
yarn add webpack --dev
// webpack4 中把命令行工具 webpack-cli 分离了，需要手动安装
yarn add webpack-cli --dev
// 用于启动服务，访问 http://localhost:8080 进行调试
yarn add webpack-dev-server --dev
配置 webpack
- 在 src 新建 main.js 入口文件
alert('hello world！')
- 在根目录新建 webpack.config.js 文件，配置入口与出口，具体配置项可查看 webpack官网
const path = require('path')
const dev = process.env.WEBPACK_DEV_SERVER
module.exports = {
// webpack 会根据 mode 进行相应的优化处理
mode: dev ? 'development' : 'production',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
}
至此，最简陋的版本已经搭建好了，走一波构建
在 package.json 中添加 build 命令
"scripts": {
"build": "webpack"
}
yarn build
构建成功后我们可以看到，dist 下有一个构建过的 main.js
使用 html-webpack-plugin 生成 html
由上 ↗ ，我们已经可以打包了，但是想在浏览器运行，还需要生成一个 html 文件，这时可以使用 html-webpack-plugin，这个插件可根据一个模版生成 html，并且会自动引用 js 文件
- 在 public 文件夹下新建 index.html 模版文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="app"></div>
</body>
</html>
- 安装
yarn html-webpack-plugin --dev
- 配置，至此，webpack 配置文件内容如下
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const dev = process.env.WEBPACK_DEV_SERVER
module.exports = {
// webpack 会根据 mode 进行相应的优化处理
mode: dev ? 'development' : 'production',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'my-vue',
template: 'public/index.html'
})
],
}
配置完成后重新 build 一次，发现 dist 下生成了一个 index.html 文件，在浏览器打开，跳出弹窗显示 hello world，说明这个 html 自动引入了打包后的 main.js ！
使用 webpack-dev-server 配置开发环境
我们在上面安装 webpack 时已经安装了 webpack-dev-server ，在 package.json 中增加命令
"scripts": {
"dev": "webpack-dev-server"
},
yarn dev
然后打开 localhost:8080 即可看到结果
支持 vue 文件
- 安装 Vue
yarn add vue
- 新建 src/app.vue
<template>
<div class="app">
{{ msg }}
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
- 修改入口文件 main.js
import Vue from 'vue'
import App from "./app.vue";
var vm = new Vue({
render: h => h(App)
}).$mount("#app");
- 安装 vue-loader
yarn vue-loader vue-template-compiler
- 配置 loader 与 plugin （必需配置 VueLoaderPlugin），至此我们的配置文件内容如下 ↓
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const dev = process.env.WEBPACK_DEV_SERVER
module.exports = {
mode: dev ? 'development' : 'production',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'my-vue',
template: 'public/index.html'
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
- 重新运行
yarn dev
可以看到 hello world ，说明已经配置好并支持 vue 文件了！！
参考
这篇文章只能算是我实践的一个记录，更多更详细的内容可参考如下文章，不过下列文章有些地方是过时的，我把过时的部分列一下，看的时候可以留意下！
webpack：从入门到真实项目配置：babel 部分 && 抽取 css 部分 && 分离代码部分 过时
Webpack 4 和单页应用入门：babel 部分 过时
