跟着慕课网的Jokcy老师做了一个todo项目，其实详细描述了webpack+vue的环境搭建。大概由于版本问题，遇到了一些课程中没显示出的error，通过上网搜索查出了解决方式。用这篇文章完整记录下自己的配置过程，以便后续参考。

vuscode插件

显示出警告：vue-loader需要安装css-loader作为第三方依赖

这些warn不用理

app.vue

index.js 实现挂载 在html页面中展示vue组件的内容

webpack.config.js 使用webpack进行打包并生成打包文件

package.json

mode

这个报错说明需要配置loader

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

依然有错误：

提示webpack4配置需要包含VueLoaderPlugin

plugins: [
    new VueLoaderPlugin()
  ]

同时npm i vue-template-compiler

依然有错误：

没有安装style-loader

bundle.js 我生成的内容有点奇怪，不知道是不是版本问题

{
        // 图片有各种格式，会用到的都要列出来
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: 
          {
            // use中，loader可以配置选项。方法：使用对象去声明
            loader: 'url-loader',
            //使用options去声明，将其中的对象传给loader
            options: {
              // 限制开始转译的大小，小的图片则不用转译，减少HTTP请求
              limit: 1024,
              // 自定义转译的文件名称
              // ext表示文件的扩展名
              name: '[name]-moira.[ext]'
            }
          }
      }

安装相应的loader：
npm i url-loader file-loader（url-loader依赖于file-loader）
配置、安装完毕loader时，就可以在js代码中直接import这些非js内容：

完成这样的文件夹创建：放置图片、样式

创建文件

body{
  color: red;
  background-image: url('../images/back.jpg')
}

在入口文件（index.js）中import进去：

import './assets/styles/test.css'
import './assets/images/back.jpg'

运行：

生成了指定格式的转译图片

接下来配置css与处理器：（stylus 可以使用模块化的方式去写css代码）
在webpack.config.js中配置loader：

{
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          // 用stylus处理完的，是css内容。要处理css内容，必须返回上一级，到HTML页面中找样式
          // 所以需要以上两个loader
          // webpack的内容就是一层一层往上扔的，所以可以多种loader进行搭配
          'stylus-loader'
        ]
}

配置好以后安装所需loader：
npm i stylus stylus-loader
接下来就可以用styl文件写样式了：
在styles文件夹中创建test-stylus.styl文件，写一些样式（这里之前安装的stylus插件就有用了）：

body 
  font-size: 20px

可以看出，比css文件少了很多格式，更加方便了
写完之后，在入口文件中引入：
import './assets/styles/test-stylus.styl'
打包一下：npm run build 显示成功
（6）webpack-dev-server的配置和使用
webpack-dev-server专门用在开发环境（mode=development）
ps：生产环境（mode=production）
npm i webpack-dev-server
配置脚本："dev": "webpack-dev-server --mode=development --config webpack.config.js"
修改webpack的配置，来适应webpack-dev-server的开发模式：

//在全局加入编译目标：web平台（网站，跑在浏览器中）
  target: 'web',

配置文件同时用在生产、开发环境，配置中需要进行判断。判断方法：在脚本中设置环境变量，进行标识。
npm i cross-env 作用：在不同平台，设置环境变量的方式不一样（如mac与windows）。使用cross-env，则可在不同平台执行同个语句来设置环境变量。
配置脚本：

"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js"

判断环境变量：

// 判断process.env.NODE_ENV是否等于development，以此判断isDev是否为true
// 在启动脚本的时候设置的环境变量全部存于process.env这个对象里面
const isDev = process.env.NODE_ENV === 'development'

module.exports

把module.exports改为const config，然后再加上：
module.exports = config
原因：要使用判断，需要用const

if (isDev) {
  // 在config上加一个devServer配置
  config.devServer= {
    // 启动的服务端口
    port: 8000,
    // 通过localhost或IP进行访问
    host: '0.0.0.0',
    // 若编译过程中有错误，显示到网页上,便于定位错误
    overlay: {
      errors: true,
    },
      //热加载
      hot: true
  }
}

接下来，我们需要在编译结果的文件夹中加一个HTML文件来容纳js文件。
安装所需插件（使用webpack形成html文件）：
npm i html-webpack-plugin

引入：
// 引入webpack的形成html插件
const HTMLPlugin = require('html-webpack-plugin')

使用（在webpack全局中配置）：

 plugins: [
    // 使用vue框架时，一定要用以下这个webpack的plugin
    // 在里面定义一个变量
    // 作用：可以在全局调用变量来判断环境，变量为：process.env.NODE_ENV 返回结果为"development" or "production"(双引号不可省略)
    // 这里调用了webpack插件，所以需要引入一下
    new webpack.DefinePlugin({
      'process.env': {
        // 判断是否isDev，若是，则为development；若不是，则为production
        NODE_ENV: isDev ? '"development"' : '"production"' 
      }
    }),
    new VueLoaderPlugin(),
    new HTMLPlugin()
  ]

// 引入webpack
const webpack = require('webpack')

配置完毕，使用npm run dev运行，进入页面，成功显示vue组件的内容。
说明webpack-dev-server已经成功启用了页面。
下面介绍一些webpack-dev-server的其他功能：

if (isDev) {
  // 在config上加一个devServer配置
  config.devSever = {
    // 启动的服务端口
    port: 8000,
    // 通过localhost或IP进行访问
    host: '0.0.0.0',
    // 若编译过程中有错误，显示到网页上,便于定位错误
    overlay: {
      errors: true,
    },
      //热加载，功能：只渲染所改组件的页面效果，不会全部刷新，其他页面数据依然会存在
      hot: true,
      // 运行时自动打开页面，但修改时会总是打开，不太好，所以看具体业务需要
      // open: true
      // 单页应用会做很多前端路由，请求进来的地址不一定是index.html。
      // historyFallback能将所有没有做映射的地址都映射到一个入口：index.html中去。
      // 课程中只是提到这个功能，没有讲详细配置
      // historyFallback: {
      // }
  },
  // 加插件，push一个新的webpack plugin
  //下面是不刷新更新内容
  config.plugins.push(
      // 启动热更新功能插件
      new webpack.HotModuleReplacementPlugin(),
      // 帮助减少不需要的信息展示
      new webpack.NoEmitOnErrorsPlugin()
    )
}

在webpack-dev-server上增加配置：

// 在config上加一个devtool配置
  // 作用：在页面上调试代码，使用source-map映射编译代码
  config.devtool = '#cheap-module-eval-source-map'

重启：npm run dev
成功展示页面，附带热更新功能：

访问网址为：localhost:8000

整个配置过程中参考的大佬地址：

• 慕课网Jokcy老师的vue+webpack打造todo应用课程；
• webpack4配置vue环境和一些小坑 ：https://blog.csdn.net/weixin_40814356/article/details/80625747