使用webpack从零搭建vue2.0项目

我正在参加「掘金·启航计划」

面试中常被问到是否了解webpack，今天就来研究一下怎么用webpack来构建vue项目

1.初始化一个webpacknpm init -y 就会生成这样一个package.json文件

2.再就是安装webpack相关的配置文件，搭建运行环境（这里可以用 npm 也可以用 yarn）

①：安装webpack yarn add webpack@4.44.2

②：安装脚手架yarn add webpack-cli@3.3.12

③：安装webpack启动开发服务器yarn add webpack-dev-server@3.11.2

3.引入vue的cdn，这里用的是vue2.0的版本https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js

4.下面就是安装vue相关的loader因为Vue也需要提供配套工具来开发单文件组件

yarn add vue-loader vue-template-compiler html-webpack-plugin@4.5.0

5.写webpack配置文件

// 引入相关loader
const { resolve } = require('path')
const HTMLWbpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 在node下运行要遵循commonJs的规范
module.exports = {
  // 开发环境
  mode: 'development',
  // 入口文件
  entry: './src/main.js',
  // 输出
  output: {
    path: resolve(__dirname, 'dist'),
    filename:'main.js'
  },
  // 处理外部文件，我们这里是引入的cdn
  externals: {
    'vue':'Vue'
  },
  devtool: 'source-map',
  // 配置loader
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader:'vue-loader'
      }
    ]
  },
  // 配置plugin
  plugins: [
    new VueLoaderPlugin(),
    new HTMLWbpackPlugin({
      template:resolve(__dirname,'public/index.html')
    })
  ]
    

}

这里要注意vue-loader的版本，踩过坑，版本高了容易报各种错误

然后运行就欧克了~

6. 最后就是配置main.js

import App from './App.vue';

new Vue({
  render:h=>h(App)
}).$mount('#app')