webpack从零构建一个vue的项目

webpack从零构建一个vue的项目

平时里，大家要构建一个vue项目或者react项目，大都是通过官方提供的脚手架来实现，这也确实为我们提供了便利，可这同时也为我们，带来了很多的困惑，为什么有那么多的配置文件，有那么多的项目依赖，它们之间有什么关系，是如何工作的？感觉用了webpack项目开发是变得简单了，但同时问题也变得多了，项目的构建变成了一个墨盒子，我们不知道盒子里的内容是如何工作的。这也正是写下这篇文章的原因。

创建一个项目工程

1. 利用命令mkdir vue-webpack-demo创建一个空的项目工程，这样我们就有了一个项目工程啦！

2. 再使用npm init初使化项目,生成package.json文件

3. 使用touch webpack.config.js来创建一个webpack的配置文件

4. 利用mkdir public来创建一个public目录，用来存放公共的资源，如模板html

5. 利用mkdir src来创建一个src目录，用来存放源代码（当然第4步，第5步可能合并mkdir public src）

6. 进行scr目录（cd src）,并在src目录下先创建两个文件App.vue, main.js (touch App.vue main.js)

7. 安装配置所需要的依赖(npm i webpack webpack-cli -D), 此时会在项目中，多出一个叫node_modules的文件夹，用来存放我们的项目依赖。

8. 配置webpack.config.js
   webpack有四个核心的概念：入口(enter), 输出(output), loader, 插件(plugins),具体参考官方文档：链接: webpack中文文档.

配置webpack.config.js

要配置一个好的webpack.config.js，首先要判断你的应用要运行在几套环境上面，一般情况下，都会有两套环境，(development和production)，应用是一个单页应用，还是一个多页应用，应用打包后，输出到哪里，文件的命名叫什么，应用需要哪些loader作项目支持，以入哪些插件，除此以外，项目是否支持本地部署启动，项目的路径别名处理，后缀处理，项目以什么作为核心框架，有依赖哪些框架。

接下来，我们一一来对上面的问题作分析。

1. 判断你的应用要运行在几套环境上面？

就实际情况而言，一般项目运行在两套环境上，就可以啦，有的公司可能有3套，4套环境（dev, sit, uat, prop）具体问题，具体分析，但大体都差不多，只是多部署两次而已。

2. 应用是一个单页应用，还是一个多页应用？

应用要配置成单页应用，还是多页应用主要是根据项目而言，主要体现在entry入口的配置，多页应用配置时，entry是一个对象，对象中有好几个入口文件，在本项目中，是作一个单页应用entry: path.resolve(__dirname, './dist')。

3. 应用打包后，输出到哪里，文件的命名叫什么？

应用打包后，文件输入到output.path上面，文件的命名是通过output.filename来体现

  output: {
      path: path.resolve(__dirname, './dist'),
      filename: '[name].[hash].js',
      publicPath: './'
    }

4. 配置loader

4.1 babel-loader

安装： npm i babel-loader @babel/core @babel/preset-env -D
配置:

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['dynamic-import-webpack']
          }
        }
      }
    ]
  }

4.2 eslint-loader

安装： npm i eslint eslint-loader -D
配置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      enforce: 'pre',
      loader: 'eslint-loader'
    }
  ]
}

4.3 url-loader

安装： npm i file-loader url-loader -D
配置：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|svg)/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    }
  ]
}

4.4. less-loader

安装： npm i less less-loader css-loader vue-style-loader -D
配置：

module: {
  rules: [
    {
      test: /\.(less|css)$/,
      use: [
        'vue-style-loader'
        'css-loader',
        'less-loader',
      ]
    }
  ]
}

4.5. vue-loader

安装： npm i vue-loader vue-template-compiler -D
配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

5. 配置plugins

5.1 html-webpack-plugin

安装： npm i html-webpack-plugin -D
配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './public/index.html'),
      filename: 'index.html'
    })
  ]
}

5.2 VueLoaderPlugin

这个插件本身在vue-loader中，所以无需额外安装
配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  plugins: [
    new VueLoaderPlugin()
  ]
}

5.3 DefinePlugin

这个插件是webpack内置插件
配置：

  const webpack = require('webpack')
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        
      })
    ]
  }

6. 配置devServer

安装 webpack-dev-server npm i webpack-dev-server -D
配置：

devServer: {
  contentBase: path.join(__dirname, "dist"),
  host: '0.0.0.0',
  port: 8088,
  hot: true,
  color: true,
  compress: true,
  historyApiFallback: true,
  allowedHosts: [],
  before(app) {},
  after(app) {

  }
}

7. 配置eslint

全局安装eslint: npm i eslint -g
对项目使用命令: eslint --init,根据提示选择适合自己的，对项目进行eslint配置，最终会在根目录生成eslint的配置文件
类似于这样：

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
    'no-new': 0,
    'space-before-function-paren': 0
  }
}

当然也要记得在module中配置eslint-loader
npm i eslint-loader -D

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'eslint-loader',
      exclude: /node_modules/,
      enforce: 'pre'
    }
  ]
}

这样一份webpack配置也就差不多啦，
最后再安装vue npm i vue -S

8. 在App.vue中随便写点什么

<template>
  <div class="app">
    <button @click="handleClick">click me</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  mounted() {
  },
  methods: {
    handleClick() {
      this.$notify({
        content: 'Hello'
      })
    }
  }
}
</script>

9. 然后在main.js中引入

import Vue from 'vue'
import App from './App'

import Notification from './components/notification'
Vue.use(Notification)

new Vue({
  el: '#app',
  render: h => h(App)
})

最后，在package.json中配置：

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.js"
}

运行命令： npm run dev,项目成功运行，至此大功告成！

最后再预告一下，接下来，会利用这个项目手写一个notification消息通知组件，喜欢的小伴别忘记关注哦~