webpack4搭建Vue开发环境笔记~~持续更新

摘要：项目地址一知识获取当前文件所在路径，等同于把一个路径或路径片段的序列解析为一个绝对路径给定的路径的序列是从右往左被处理的，后面每个被依次解析，直到构造完成一个绝对路径如果处理完全部给定的片段后还未生成一个绝对路径，则当前工作目录会被用上生成

项目git地址

__dirname: 获取当前文件所在路径，等同于path.dirname(__filename)

console.log(__dirname);
// Prints: /Users/mjr
console.log(path.dirname(__filename));
// Prints: /Users/mjr

path.resolve([..paths]): 把一个路径或路径片段的序列解析为一个绝对路径

给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径
如果处理完全部给定的 path 片段后还未生成一个绝对路径，则当前工作目录会被用上
生成的路径是规范化后的，且末尾的斜杠会被删除，除非路径被解析为根目录
长度为零的 path 片段会被忽略
如果没有传入 path 片段，则 path.resolve() 会返回当前工作目录的绝对路径

path.resolve("/foo/bar", "./baz");
// 返回: "/foo/bar/baz"

path.resolve("/foo/bar", "/tmp/file/");
// 返回: "/tmp/file"

path.resolve("wwwroot", "static_files/png/", "../gif/image.gif");
// 如果当前工作目录为 /home/myself/node，
// 则返回 "/home/myself/node/wwwroot/static_files/gif/image.gif"

项目目录生成如下文件

.
├── build
│   ├── build.js
│   ├── index.html
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── package.json
├── package-lock.json
└── src
    ├── App.vue
    ├── main.js
    ├── timg.gif
    └── timg.jfif

首先，先装下webpack依赖：

npm i webpack webpack webpack-cli -D

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    bundle: path.resolve(__dirname, "../src/main.js")
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name].[hash].js",
    publicPath: "/"
  },
  module: {
    rules: [
      
    ]
  },
  plugins: [
    
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "index.html")
    })
  ],
  resolve: {
    
  }
};

上面用到了html-webpack-plugin插件，装下：

npm i html-webpack-plugin -D

const merge = require("webpack-merge");
const path = require("path");
const baseConfig = require("./webpack.base.conf");
module.exports = merge(baseConfig, {
  // mode关系到代码压缩质量  https://webpack.docschina.org/guides/tree-shaking/
  mode: "development",
  // source-map,将编译后的代码映射到原代码，便于报错后定位错误
  devtool: "inline-source-map",
  
  devServer: {
    
    contentBase: path.resolve(__dirname, "../dist"),
    
    open: true
  }
});

合并webpack配置的插件webpack-merge，能够启一个简易服务的webpack-dev-server，详情

npm i webpack-dev-server webpack-merge -D

const merge = require("webpack-merge");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const path = require("path");
const baseConfig = require("./webpack.base.conf");
module.exports = merge(baseConfig, {
  mode: "production",
  devtool: "source-map",
  module: {
    rules: []
  },
  plugins: [
    new CleanWebpackPlugin(["dist/"], {
      root: path.resolve(__dirname, "../")
    })
  ]
});

清除文件的插件：

npm i clean-webpack-plugin -D

const webpack = require("webpack");
const config = require("./webpack.prod.conf");

webpack(config, (err, stats) => {
  if (err || stats.hasErrors()) {
    // 在这里处理错误
    console.error(err);
    return;
  }
  // 处理完成
  console.log(stats.toString({
    chunks: false,  // 使构建过程更静默无输出
    colors: true    // 在控制台展示颜色
  }));
});

// package.json
{
  +++
  "scripts": {
    "build": "node build/build.js",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  },
}

以上算是一个webpack的基本结构，如果入口文件（main.js）里引入的是正经js，npm dev和npm build是可以的打包编译的，但是我们是要写vue，那就要加些loader和plugins了

依赖安装要求：webpack 4.x | babel-loader 7.x | babel 6.x,注意babel-loader和babel的版本，不然会报错

npm install -D babel-loader@7 babel-core babel-preset-env webpack

然后再配置中加入

// base.conf.js
module.exports = {
  +++
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      +++
    ]
  }
}

我们还需要添加一个配置文件（.babelrc）在根目录下：

/// .babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [">0.25%", "last 2 versions", "not ie 11", "not op_mini all"]
      }
    }]
  ]
}

这就是 babel-preset-env 的作用，帮助我们配置 babel。我们只需要告诉它我们要兼容的情况（目标运行环境），它就会自动把代码转换为兼容对应环境的代码。
以上代码表示我们要求代码兼容最新两个版本的浏览器，不用兼容 11(及以下)和Opera Mini，另外市场份额超过 0.25% 的浏览器也必须支持。
只需要告诉 babel-preset-env 你想要兼容的环境，它就会自动转换

如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题

其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件

另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader赖于file-loader，即使用url-loader时，也要安装file-loader

npm i url-loader file-loader -D

/// base.conf.js
module.exports = {
  +++
  module: {
    rules: [
      +++
      {
        test: /.(png|jpg|jfif|jpeg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              // 低于这个limit就直接转成base64插入到style里，不然以name的方式命名存放
              // 这里的单位时bit
              limit: 8192,
              name: "static/images/[hash:8].[name].[ext]"
            }
          }
        ]
      },
      // 字体图标啥的，跟图片分处理方式一样
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: "url-loader",
            name: "static/font/[hash:8].[name].[ext]"
          }
        ]
      },
    ]
  },
}

作用自己去看

npm i vue-loader -D

// base.conf.js
module.exports = {
  +++
  module: {
    rules: [
      +++
      {
        test: /.vue$/,
        loader: "vue-loader"
      }
    ]
  }
}

在这里还要一个插件，这个插件是必须的！

// base.conf.js
const VueLoaderPlugin = require("vue-loader/lib/plugin")
module.exports = {
  +++
  plugins: [
      // 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。
      // 例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 

好了，npm dev 先看一下女神，放松一下：

使用 splitChucksPlugin 插件，这是 Webpack 自带的，不用安装第三方依赖，默认配置即可

module.exports = {
  +++
  plugins: [
    +++
    new webpack.optimize.SplitChunksPlugin()
  ]
}

想了解这个插件的默认配置及如何配置，英文，中文

每次我们对项目进行打包时，我们都会把引用的第三方依赖给打包一遍，比如 Vue、Vue-Router、React 等等。但是这些库的代码基本都是不会变动的，我们没必要每次打包都构建一次，所以我们最好将这些第三方库提取出来多带带打包，这样有利于减少打包时间。
官方插件是 DllPlugin。推荐一个比较好用的插件 —— autodll-webpack-plugin

npm i autodll-webpack-plugin -D

// base.conf.js
module.exports = {
  +++
  plugins: [
   // 将一些不太可能改动的第三方库多带带打包，会通过缓存极大提升打包速度
    new AutoDllPlugin({
      // will inject the DLL bundle to index.html
      // default false
      inject: true,
      debug: false,
      filename: "[name]_[hash].js",
      path: "static",
      entry: {
        // [name] = vue, 在这里会将entry里的每个item(vue,jquery)都打包成一个js
        vue: [
          "vue",
          "vue-router"
        ],
        // [name] = jquery
        // jquery: [
        //   "jquery",
        //   "jquery-from"
        // ]
      }
    }),
    +++
  ]
}

inject 为 true，插件会自动把打包出来的第三方库文件插入到 HTML。filename 是打包后文件的名称。path 是打包后的路径。entry 是入口，vendor 是你指定的名称，数组内容就是要打包的第三方库的名称，不要写全路径，Webpack 会自动去 node_modules 中找到的。
每次打包，这个插件都会检查注册在 entry 中的第三方库是否发生了变化，如果没有变化，插件就会使用缓存中的打包文件，减少了打包的时间，这时 Hash 也不会变化。

“热重载”不只是当你修改文件的时候简单重新加载页面。启用热重载后，当你修改 .vue 文件时，该组件的所有实例将在不刷新页面的情况下被替换。它甚至保持了应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大地提高了开发体验，以下两种方式择一即可

方式1：启动的时候通过--hot选项就ok了，webpack，vue-loader

"scripts": {
  +++
  "dev": "webpack-dev-server --hot --inline --progress --config build/webpack.dev.conf.js"
},

方式2：或者通过配置webpack.dev.config.js，相比第一种，就会麻烦一点

const webpack = require("webpack")
module.exports = {
  +++
  module: {
    devServer: {
      +++
      // 开启热重载
      hot: true
    },
    plugins: [
      // 启用模块热替换(HMR)
      new webpack.HotModuleReplacementPlugin(),
      // 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。
      new webpack.NamedModulesPlugin(),
      +++
    ]
  }
}

确保 VS Code 安装了 Vetur（设置编辑器支持vue文件，如果写过vue忽略） 和 Eslint 插件

npm i -g eslint@latest

eslint --init

然后选个最流行的就行了
" })

代码如果eslint有报错，就让编译不通过

npm i eslint-loader babel-eslint -D

{
  +++
  "parser": "babel-eslint"
}

module.exports = {
  module: {
    rules: [
      {
        test: /.(vue|js)$/,
        loader: "eslint-loader",
        exclude: /node_modules/,
        // 预处理
        enforce: "pre",
        include: [path.join(__dirname, "..", "src")]
      }
    ]
  }
}

代码提交之前对代码进行检查

npm i husky -D 

{
  +++
  "script": {
    +++
    "precommit": "eslint --fix --ext .js --ext .vue src/"
  }
}

该工具可以在我们提交代码时，调用"precommit"钩子，执行预处理操作，eslint不通过，无法提交

在提交时仅对git add的 js,vue 文件进行检测lint-staged 和 husky 在 pre-commit 阶段做代码检查

npm i lint-staged -D

{
  +++
  "script": {
    +++
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
}

npm i juery -D

 module.exports = {
   +++
   plugins: [
     +++
     new webpack.ProvidePlugin({
       $: "jquery"
     })
   ]
  };

这样就可以将$当全局变量使用了，当然eslint要配置个global，这里不介绍了

对你有帮助的话点个刷波6，点个赞吧