新建一个 public/index.html 页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div></div> </body> </html>修改 webpack-config.js 配置
通过代码的热更新功能，我们可以实现不刷新页面的情况下，更新我们的页面
安装依赖
npm install webpack-dev-server -D修改webpack.config.js配置
通过配置 devServer 和 HotModuleReplacementPlugin 插件来实现热更新
安装依赖
npm install file-loader url-loader -Dfile-loader 解析文件url，并将文件复制到输出的目录中
url-loader 功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件复制到输出的目录中
修改 webpack-config.js 配置
添加 rules 配置，分别对 图片，媒体，字体文件进行配置
安装需要的依赖文件
npm install vue-loader vue-template-compiler cache-loader thread-loader -D npm install vue -Svue-loader 用于解析.vue文件
vue-template-compiler 用于编译模板
cache-loader 用于缓存loader编译的结果
thread-loader 使用 worker 池来运行loader，每个 worker 都是一个 node.js 进程。
修改 webpack.config.js配置
// build/webpack.config.js const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { // 指定打包模式 mode: 'development', entry: { // ... }, output: { // ... }, devServer: { // ... }, resolve: { alias: { vue$: 'vue/dist/vue.runtime.esm.js' }, }, module: { rules: [ { test: /\.vue$/, use: [ { loader: 'cache-loader' }, { loader: 'thread-loader' }, { loader: 'vue-loader', options: { compilerOptions: { preserveWhitespace: false }, } } ] }, { test: /\.jsx?$/, use: [ { loader: 'cache-loader' }, { loader: 'thread-loader' }, { loader: 'babel-loader' } ] }, // ... ] }, plugins: [ // ... new VueLoaderPlugin() ] }测试一下
在 src 新建一个 App.vue
// src/App.vue <template> <div> Hello World </div> </template> <script> export default { name: 'App', data() { return {}; } }; </script> <style lang="scss" scoped> .App { color: skyblue; } </style>修改 main.js
import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App) }).$mount('#app')运行一下
npm run serve
4. 定义环境变量通过 webpack提供的DefinePlugin插件，可以很方便的定义环境变量
plugins: [ new webpack.DefinePlugin({ 'process.env': { VUE_APP_BASE_URL: JSON.stringify('http://localhost:3000') } }), ] 5. 区分生产环境和开发环境新建两个文件
webpack.dev.js 开发环境使用
webpack.prod.js 生产环境使用
webpack.config.js 公用配置
开发环境与生产环境的不同
5.1 开发环境不需要压缩代码
需要热更新
css不需要提取到css文件
sourceMap
...
5.2 生产环境压缩代码
不需要热更新
提取css，压缩css文件
sourceMap
构建前清除上一次构建的内容
...
安装所需依赖
npm i @intervolga/optimize-cssnano-plugin mini-css-extract-plugin clean-webpack-plugin webpack-merge copy-webpack-plugin -D@intervolga/optimize-cssnano-plugin 用于压缩css代码
mini-css-extract-plugin 用于提取css到文件中
clean-webpack-plugin 用于删除上次构建的文件
webpack-merge 合并 webpack配置
copy-webpack-plugin 用户拷贝静态资源
5.3 开发环境配置