本文分上、中、下三个部分(先写上篇)

webpack历险记之一个简单的vue hellowrld (上)
vue项目搭建之vue全家桶和element ui、规范、单元测试等等。。。(中)
vue项目优化之打包优化，页面加载优化等等。。。(下)

代码示例地址https://github.com/zwfun/zw-vue-cli

以下所有的知识都是从下面的参考文档学来的，如果看过好几遍的同学我这篇文章就不用看了，如果没看过的先去看几遍，看过了实在还是不会的同学再来看我这篇文章

本文不写具体的操作步骤, 只写这个过程中需要什么，具体怎么做以参考文档的形式给出网上很多文章一上来就介绍安装各种包，看完一遍之后还是一知半解，无从下手。自己写一个文章，按自己需要的功能加载各种包。

我要做什么

第一次配置webpack, 就从构建一个vue的helloworld项目开始。我需要让webpack帮我打包vue项目

1、需要webapck做什么

这时候是不是脑袋一片空白，不知道从什么地方开始。万事开头难，先从我需要webpack帮我做什么开始

首先当然是帮我打包vue文件
我们项目中会用到css,scss,js,img,字体文件，webpack是不是也能帮我们加载css并打包
我会使用es6语法，考虑到兼容性问题， webpack能不能帮我转成es5
开发时我需要在写代码的时候实时展示我的内容，需要热更新
构建整个项目

ps：也就做5件事不多嘛

2、怎么做

开始前先看看webpack官方中文文档-指南文档的概念和指南，也许webpack官方文档-配置部分你也应该看下

看完之后应该对webpack有一定的了解了，那咱们继续

webpack安装和入口和出口配置这些直接忽略，不会的话看官方文档的起步章节

webpack帮我们打包vue文件

安装vue-loader 参考官方文档-手动设置

      npm install -D vue-loader vue-template-compiler

vue-loader webpack配置参考官方文档-手动设置

      // webpack.base.config.js
      const VueLoaderPlugin = require('vue-loader/lib/plugin')
  module.exports = {
  module: {
      rules: [
      // ... 其它规则
      {
          test: /\.vue$/,
          loader: 'vue-loader'
      }
      ]
  },
  plugins: [
      // 请确保引入这个插件！
      new VueLoaderPlugin()
  ]
  }

webpack帮我们打包css文件

参考webpack官方文档-指南-加载css
参考vue-loader官方文档-使用预处理器
因为我会用到scss，以及在vue组件中使用css/scss，所以我需要使用一下三个loader帮我加载css。
- 'vue-style-loader',
- 'css-loader',
- 'sass-loader'
在正式环境下我需要webpack帮我把css提取出来，所以在正式环境中会使用MiniCssExtractPlugin.loader帮我提取css到单独的文件中

      // 正式环境配置
      rules: [
          {
              test: /\.scss$/,
              use: [
                  {
                      loader: MiniCssExtractPlugin.loader,
                      options: {
                          publicPath: 'css/'
                      }
                  },
                  'css-loader',
                  'sass-loader',
              ]
          },
          {
              test: /\.css$/,
              use: [
                  {
                      loader: MiniCssExtractPlugin.loader,
                      options: {
                          publicPath: 'css/'
                      }
                  },
                  
                  'css-loader'
              ]
          },
      ]
  // 开发环境配置
  rules: [
      {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            'sass-loader'
          ]
      },
      {
          test: /\.css$/,
          use: [
              'vue-style-loader',
              'css-loader'
          ]
      }
  ]

使用babel7帮我将es6转为es5
- babel官方文档
- babel在线试用
- babel选择环境配置
- 使用配置文件的方式配置babel7. 新建一个.babelrc,@babel/env这个preset包括支持现代 JavaScript（ES2015，ES2016 等）的所有插件， @babel/plugin-transform-runtime帮我们动态转义内置函数(像 Array.from 或 Object.assign 这样的静态方法，像Array.prototype.includes 这样的实例方法)，配置如下
```
      {
          "presets": [[
              "@babel/env",
              {
              "useBuiltIns": "entry"
              }
          ]],
          "plugins": ["@babel/plugin-transform-runtime"]
      }
  
```

加载字体和图片等

参考file-loader

字体和图片是使用file-loader加载。配置file-loader后我们能使用像import img from './file.png'这样的方式加载文件

    rules: [
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                'file-loader'
            ]
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader'
            ]
        }
    ]

热更新
- 参考使用 webpack-dev-server
- 开发环境，使用webpack-dev-server本地服务器实现热加载，
- webpack中配置，浏览器中输入0.0.0.0:8888即可打开项目。
```
 
  devServer: {
      host: '0.0.0.0',
      historyApiFallback: true,
      port: 8888
  },
```
- 在packge.json的script中配置"start": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config build/webpack.local.config.js --progress --public --open"，这样我们使用webpack-dev-server加载项目，并实现热加载
构建整个项目
- 参考webpack官方文档-指南-管理输出
- 参考设置-htmlwebpackplugin
- 参考清理 /dist 文件夹
- npm run build帮我们构建，那我们还需要点什么呢？
  - 每次打包时帮我们清空dist文件。使用(CleanWebpackPlugin)
  - 使用html模板自动将打包生成的js和css文件注入到html模板中,使用(HtmlWebpackPlugin)
```
      const CleanWebpackPlugin = require('clean-webpack-plugin');
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      plugins: [
          new CleanWebpackPlugin(),
          new HtmlWebpackPlugin({
              title: 'zw-vue-cli',
              template: path.resolve(__dirname, '../', 'index.html')
          })
      ]
```

well done

一个基础的vue webpack配置就这样完成了

参考文档