简述–webpack搭建Vue项目基本结构

npm -D -S 的区别：
-D： 同 --save-dev，开发环境
-S： 同–save，生产环境

之前的博客
**

1. 初始化项目

npm init

2. 安装webpack、webpack-cli

npm i webpack webpack-cli -D

3. 搭建基本的目录结构

vue文件会在最后的时候进行处理，前期只进行基本功能的搭建，如果需要看后续步骤，前边的您可以直接跳过。

4. 配置webpack.config.js文件

const path = require('path');

module.exports = {
  // 定义打包的入口
    entry: {
        bundle: path.join(__dirname, 'src/main.js'),
    },
  // 定义打包的出口
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }
}

5. webpack-dev-server

• 安装：

npm i webpack-dev-server -D

• 配置package.json, 使之可以通过npm run dev来快速启动。
• 热更新的配置

devServer: {
        open: true,
        contentBase: 'public',
        port: 3000,
        hot: true
    }

6. html-webpack-plugin

自动引入js等文件在HTML中

// 首先引入文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 配置插件
plugins: [
        new HtmlWebpackPlugin({
          //  默认打开public/index.html文件
            template: path.join(__dirname, 'public/index.html'),
            filename: 'index.html'
        })
    ]

7. css-loader、style-loader、less-loader

处理css、less文件及语法

8. url-loader、html-loader

相关url-loader和file-loader之间的的区别还请自行百度
处理图片地址问题

• 但是在HTML文件中img标签的src中这样引入

<img src="../src/assets/img/0.jpg" alt />

就会出现这样的错误;

这是因为webpack对html的处理不是特别的友好，我们需要借助官方提供的html-loader来处理：

• loader的地址

{
  test: /\.html$/,
  use: ['html-loader']
}

• 安装完后，我们发现之前的报错没有了，但是出现了新的错误：

这块是由url-loader造成的，我们配置一下esModule为false即可。

{
  test: /\.(jpg|png|gif|bmp|svg)$/,
    use: [{
      loader: 'url-loader',
      options: {
        esModule: false,
        limit: 1024,
        name: '[hash:8]-[name].[ext]'
        // name: '[name].[ext]'
      }
    }]
}

至此，关于HTML中img src的问题已经处理完毕。

9. babel-loader

用于处理高级语法不兼容的问题.
具体的安装配置请见官网

10. vue-loader

用于处理 .vue 文件

npm i vue-loader -D

需要注意的是，此loader需要引入，并且在plugins中new一下。

这个时候如果报错的话，很有可能是：

Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

这个错误是因为 vue 和 vue-template-compilerde 版本不一致造成的，我们只需要

npm i vue-template-compiler

安装一下即可。

至此，整个项目搭建的基本流程已经完毕，在此基础之上，我们可以对其进行进一步的拓展。