江苏龙网

  1. 主页 > 生活百科 > >

一步步从头搭建 Vue 开发环境( 二 )

Vue 开发环境

然后我们在根目录新建一个文件 babel.config.js 并做出如下配置：
module.exports = {       presets: [        "@babel/env",    ]};我们再打包试试，你会发现已经转成 ES5 的语法了：

一步步从头搭建 Vue 开发环境

文章插图
 
不过当你使用一些浏览器不能识别的语法的时候打包的时候就会报错，比如我们代码中使用了 Set():
一步步从头搭建 Vue 开发环境

文章插图
 
下面我们就配置 @babel/polyfill 。
按需引入 @babel/polyfill先安装：
npm install @babel/polyfill -S然后我们在根目录新建一个文件 babel.config.js 并做出如下配置：
module.exports = {       presets: [        [            "@babel/env",            {                useBuiltIns: "usage",  // 按需加载 @babel/polyfill            },        ],    ]};这样配置后，打包出来的文件就只是仅仅打包了 polyfill 代码中需要使用的那部分，打包后的体积也大大减少了 。
按需加载后文件体积小了 360KB 左右 。
小提示: 打包生成的文件是不会自动删除的，需要我们配置 clean-webpack-plugin 插件 。
接下来我们开始引入 Vue 。
引入 Vue我们先安装相关的包：
npm install vue -Snpm install vue-loader vue-template-compiler -D现在项目目录大概是这样的：
一步步从头搭建 Vue 开发环境

文章插图
 
然后我们将 main.js 代码改成：
import Vue from 'vue'import App from './App.vue'const root = document.createElement('div')document.body.appendChild(root)new Vue({    render: h => h(App)}).$mount(root)因为要支持 .vue 文件，所以为我们在 webpack 也需要做相关的配置，即在 webpack.config.js 做如下配置；
...module: {    rules: [        {            test: /.vue$/,            loader: 'vue-loader'        }    ]},...
注意：vue-loader 在 15.* 之后的版本使用 vue-loader 都是需要依赖 VueLoaderPlugin 的，具体配置见源码 。
做到这里是不是想看看这段代码在浏览器的运行结果呢？OK 我们继续配置 。
配置 html-webpack-plugin 和 devServer配置 html-webpack-pluginnpm install html-webpack-plugin -D我们在根目录新建一个 index.html 文件，然后还是配置 webpack.config.js 文件；
plugins: [    new CleanWebpackPlugin(),   // 清除 dist 的文件    new VueLoaderPlugin(),    new HtmlWebpackPlugin({        filename: 'index.html',        template: 'index.html',        inject: true    }),]打包后 dist 就会多一个 index.html 文件:
一步步从头搭建 Vue 开发环境

文章插图
 
我们发现打包后的文件自动插入了 index.html 模板，并生成了一个新的 index.html 文件，细心的朋友应该看到了所有的文件都合并在 main.js 了，等下我就说说该如何把这个文件分开；在之前我们先看看如何实现开发环境热更新 。
配置 devServer先安装包:
npm install webpack-dev-server -D还是在 webpack.config.js 添加配置：
devServer: {    host: 'localhost',    port: 8080,    hot: true, // 热更新},plugins: [    // 剩略了部分代码，详细的请看源码    new webpack.HotModuleReplacementPlugin(),    new webpack.NamedModulesPlugin()]


推荐阅读


上一篇：让双系统使用更轻松

下一篇：使用 HTTPie 进行 API 测试