Vue，Webpack4 最佳拍档

自从工作之后，就已经很久没有写过博客了。时间被分割得比较碎，积累了一段时间的学习成果，才写下了这篇博客。之前有写过 Webpack4 的文章，但是都比较偏入门，唯一的一篇实战篇 —— 基于Webpack搭建React开发环境，也是比较简单的，没有涉及到 CSS 抽取，第三方库…

搭建开发环境

1. 安装 Vue CLI

   npm install -g @vue/cli
   

2. 创建 Vue 项目

   vue create vue-project
   

3. 安装 Webpack4

   cd vue-project
   npm install webpack@4 webpack-cli --save-dev
   

4. 修改配置文件

   在项目根目录的 vue.config.js 文件中，添加以下代码：

   module.exports = {
     configureWebpack: {
       module: {
         rules: [
           {
             test: /\.vue$/,
             loader: 'vue-loader'
           },
           {
             test: /\.js$/,
             loader: 'babel-loader'
           },
           {
             test: /\.css$/,
             loader: ['vue-style-loader', 'css-loader']
           }
         ]
       }
     }
   }
   

开发 Vue 应用

1. 创建 Vue 组件

   在项目根目录的 src 文件夹中，创建一个名为 HelloWorld.vue 的文件，并添加以下代码：

   <template>
     <div>Hello World!</div>
   </template>
   
   <script>
   export default {
     name: 'HelloWorld'
   }
   </script>
   

2. 在 Vue 实例中使用组件

   在项目根目录的 src 文件夹中的 main.js 文件中，添加以下代码：

   import HelloWorld from './HelloWorld.vue'
   
   new Vue({
     el: '#app',
     components: {
       HelloWorld
     },
     template: '<HelloWorld/>'
   })
   

3. 运行开发服务器

   npm run serve
   

总结

使用 Webpack4 搭建 Vue 开发环境非常简单，只需几步即可完成。Webpack4 强大的功能可以帮助开发者更轻松地管理项目中的 JavaScript 模块和 CSS 文件。Vue.js 也是一个非常棒的框架，它可以帮助开发者快速构建用户界面。希望本文能够帮助开发者更轻松地使用 Webpack4 和 Vue.js 进行开发。