合理使用webpack提高开发效率

虽然公司有提供现成的脚手架工具，但是作为开发人员懂得必要的相关知识还是很重要的。这样有利于提高我们的开发效率，优化我们的代码。

关于npm scripts

什么是npm scripts

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。

在我们工作的时候使用的npm start, npm build. 就是 npm 脚本命令。合理的使用npm脚本可以让我们避免输入一大串的繁琐命令。

我对start命令和build命令的理解

"scripts": {
    "start": "webpack-dev-server --env=dev --open --host 192.168.1.84",
    // webpack-dev-server 打开开发环境
    // --env=dev 定义env变量为dev，用来区分生产环境和开发环境
    // --open 自动在浏览器当中打开项目
    // --host 192.168.1.84 使用ip地址打开项目，主要作用是可以用来让手机或者别人的电脑能够访问到开发环境的项目
    "build": "webpack --env=prod --progress --profile --colors"
    // webpack 打包命令
    // --env=prod 定义env变量为prod,用来区分生产环境和开发环境
    // --progress 显示打包进度
    // profile 性能监控,输出性能数据
    // --colors 让打包时的代码带点颜色

 },

定制自己的npm脚本

比如我希望我的打包过程简单一点,我只想简单的打包，我不关心打包进度，也不关注性能，什么五颜六色的打包信息我更不care，这个时候我的npm scrpis可以写成这样。

"scripts": {
   "liujp": "webpack --env=prod"
}

这个时候我可以执行我自己的npm scripts来打包我的项目了。

cmd当中输入：  npm run liujp

文档

npm scripts文档

利用webpack配置代理，解决跨域问题

在前后端分离的项目当中，常常碰到跨域问题。当只有开发环境存在跨域的时候我们完全可以不用麻烦到后端大佬。我们完全可以自己配置代理来解决这个问题。

devServer.proxy 的使用

这里我简单说下，具体的看文档进行详细了解。

devServer: {
    proxy: {
        '/': {
           target: "http://192.168.1.84/test",
        }
    },
}

如上代码，进行这样简单的配置，当我在项目当中调用数据的时候

// 接口管理文件
const API = {
  userInfo: "/userInfo"
}
module.exports = API;
// 项目文件
const API = require("api");
$http.get(api.userInfo).then(({data})=>{
  console.log("获取用户数据===>",data)
})

如上，这样我们就可以获取到 http://192.168.1.84/test/userInfo 这个接口的数据了。

文档

webpack代理配置文档

配置常用的功能模块，提高开发效率

比如常用的网络请求模块 $http.js, 接口管理文件 api.js, 自己封装的常用工具方法类。

利用webpack给我们提供的插件ProvidePlugin可以减少我们频繁的引入这些模块，从而提高我们的开发效率，它可以使我们在用到配置模块的时候帮我们节省 import 的过程。

例如：

// webpack配置
plugins: [
    new webpack.ProvidePlugin({
         "api": path.resolve(__dirname,"../src/static/lib/api.js"),
         "$http": path.resolve(__dirname,"../src/static/lib/http.js"),
         "utils": path.resolve(__dirname,"../src/static/lib/utils.js")
     })
],
// 项目当中使用,我们可以直接使用相关模块，而不需要引入, 这个操作webpack会默认帮我们做了
$http.get(api.test).then(({data})=>{
    console.log(data)
})

文档

ProvidePlugin文档

使用resolve.alias简化我们的模块引入

在项目过程当中，文件的嵌套可能会十分复杂，导致引入的路径很长，这个时候，就可以使用这个api，来简化我们的代码。

webpack配置示例

...
resolve: {
    extensions: ['.ts', '.js', '.json', '.jsx'], // 允许省略后缀
    alias: {
        "@": path.resolve(__dirname,"../src/components"), // 通用组件地址
     }
}

项目当中使用

// 使用前的引入
import TestComponents from "../../../components/ExportComponents/TestComponents";
// 简化后
import TestComponents from "@/ExportComponents/TestComponents";

文档

resolve.alias文档

配置全局变量

当你需要全局变量的时候，可以使用DefinePlugin插件来配置。

使用场景，例如全局作用域 CONTEXT_PATH

具体看文档。

DefinePlugin