合理使用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