利用webpack4.x 从零搭建一个vue项目

[panchaoco]

目前vue官方的脚手架工具似乎并没有支持webpack4.x的版本搭建vue项目，最近折腾了一下，做以下记录，以便下次翻阅

1. 首先，新建一个空文件夹

mkdir demo
cd demo

2. 进入到我们新建好的目录之后，在命令行工具中运行npm init，生成package.json文件

npm init

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
  }
}

3. 安装我们需要的依赖, npm 命令或者yarn都可以

vue 与 vue-router这两个就不说了，vue必备的两件套，当然项目中还用到vuex，就一并加进去，搭建一个简单的webpack vue项目，刚开始我们只需要用到webpack的小四件套

yarn add webpack webpack-cli webpack-dev-server webpack-merge -D
yarn add vue vue-router

等待依赖安装完成，package.json会如下：

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.2",
  },
  "devDependencies": {
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14", // webpack提供的小型服务器，可以热更新
    "webpack-merge": "^4.2.1" // 合并webpack配置
  }
}

安装完这些依赖之后，我们还要再装几个的包，运行如下命令

yarn add vue-loader vue-template-compiler -D
yarn add babel-loader @babel/core -D
yarn add url-loader -D
yarn add html-webpack-plugin -D # 该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 

这里需要解释一下的是，在webpack3.x的版本中，用的babel-core是6.x的版本，但是升级到webpack4.x之后，需要将依赖修改为@babel/core， 安装7.x或以上的版本就可以了

4. 安装完所需要的依赖之后，进入到我们的项目中，按照以下项目布局新建目录和文件

.
├── build
│     ├── webpack.base.conf.js
│     ├── webpack.dev.conf.js
│     ├── webpack.prod.conf.js
├── src
│     ├── components
│     ├── App.vue
│     ├── main.js
├── src
├── index.html
├── package.json
.

5. webpack的一些配置

// webpack.base.conf.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry: {
    app: './src/main.js' // 入口文件
  },
  output: {
    path: path.resolve(__dirname, '../public'), // 输出目录
    filename: "[name].[hash].entry.js"
  },
  module: { // 配置loader
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
      },
    ]
  },
  plugins: [
    new VueLoaderPlugin(), // 
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html') // 模板文件
    }),
    // 解决vender后面的hash每次都改变
    new webpack.HashedModuleIdsPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热模块替换
  ],
  resolve: {
    extensions: ['.js', '.vue'], // 通过import 引入的模块可省略的后缀
    alias: {
      vue: 'vue/dist/vue.esm.js',
      '@': path.resolve('src'),
    },
  },
}

// webpack.dev.conf.js
const merge = require('webpack-merge');
const webpackBaseConf = require('./webpack.base.conf');
const path = require('path');

module.exports = merge(webpackBaseConf, {
  devtool: 'inline-source-map',
  devServer: { // webpack提供一个不需手动刷新页面，根据代码更新而自动刷新的web服务器，其他参数大可以在用到的时候查询一下。
    contentBase: '../public',
    port: 9000, // 端口
    open: true, // 是否自动打开浏览器
    hot: // 是否热加载 其他的参数
  },
  output: {
    filename: 'js/[name].[hash].js',
    path: path.resolve(__dirname, '../public'),
  },
  mode: 'development',
});

以上的devServer 或者其他诸如会区分环境的配置可根据vue官方脚手架工具生成的项目那样在config目录中配置，这里不多做介绍，webpack.prod.conf.js也不介绍，大家可根据自己在生产环境需求配置

6. 以上配置之后，在scripts中新建一个运行脚本（dev）

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot --progress --colors --open --config build/webpack.dev.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.21",
    "vue-router": "^3.0.2",
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.5.1",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.2.1"
  },
  "peerDependencies": {
    "vuex": "^3.0.1"
  }
}

关于build的配置这里就暂时不介绍了，大家可以自行研究一下，还有扩展的less或者stylus等，都可以自己研究一下