webpack开发环境配置

FuisonDesign 发布于2019-08-23 18:14 / 1216人阅读

摘要：本次的重点主要集中在开发环境上，生产环境则是使用的默认模式。开发环境开发环境没什么好说的了，简单易配置，官网很详细。

日常吐槽

经过不断的调整和测试，关于 react 的 webpack 配置终于新鲜出炉。本次的重点主要集中在开发环境上，生产环境则是使用 webpack 的 production 默认模式。

本次配置主要有：

eslint+prettier;

optimization.splitChunks;

happypack;

DllReferencePlugin & DllPlugin;

...

文档的重要性

讲真，对于初次接触 webpack 的同学，怕的可能不是 webpack 的配置，而是长长的 package.json。依赖那么多，你怎么就知道需要哪些依赖呢。不开玩笑，我还真知道。
webpack 的依赖主要是一些 loader 和 plugins。我们知道单页面引用被打包后，原有的结构基本上不复存在了。而之前引用的图片或字体资源还按照之前的路径查找，肯定是找不到的。那么我们就需要转换工具（顺便转换资源）—— url-loader|file-loader。
大多数人写样式时，喜欢使用 css、less、sass。这时也会有对应的工具 style-loader, css-loader, less-loader。
想要使用 JavaScript 新特性或处理兼容性，就用 babel-loader。以上这些基本上可以应付一些简单的项目。可实际上呢？

我信你个鬼，你这个糟老头坏的很！

看文档啊，看官方介绍啊。本次也是通过看 babel 文档，和一些依赖文档来配置 webpack 的，全程无压力，而且很正宗。所以，文档很重要。

eslint+prettier

如果时团队合作，代码规范是很重要的。可以通过 eslint+prettier 规范。这两个工具各有侧重点，不过官网也提供了两者结合的方案。详细介绍见官网。我个人不习惯创建太多的配置文件，所以都放在了 package.json 文件中。

//  webpack.common.js
{
    enforce: "pre",
    test: /.m?jsx?$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options: {
        fix: true,
        cache: true,
        formatter: require("eslint-friendly-formatter"),
    }
},

"eslintConfig": {
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": [
        "plugin:prettier/recommended"
    ]
},
"prettier": {
    "singleQuote": true,
    "semi": true
},

开发环境

开发环境没什么好说的了，简单易配置，官网很详细。

// webpack.dev.js

plugins: {
    //...
    new webpack.HotModuleReplacementPlugin()
},
devtool: "eval-source-map",
devServer: {
contentBase: path.resolve(__dirname, "..", "dist"),
port: APP_CONFIG.port,
hot: true,
open: true
}

// index.js
// 入口处要配置这些，别忘了。
// 因为有冒泡的机制，所以在顶端加一个就好。
if (module.hot) {
  module.hot.accept("./views/login/index.js", () => {
    render(App) // 渲染应用
  })
}

optimization.splitChunks

这个配置是用来分割包的。在性能优化上，请求数和请求包的大小也是很重要的优化点。请求数量和请求数据大小要控制在合理的范围内。
不过通常情况下，我们会将包分割为内容不变的部分和内容变化的部分。这不仅仅是为了将大的包分割成更小的包，也是为了能够充分利用缓存机制。

// webpack.common.js
runtimeChunk: "single",
    splitChunks: {
        cacheGroups: {
        verdor: {
            test: /[/]node_modules[/]/,
            name: "verdors",
            chunks: "all",
            priority: -10,
        },
        common: {
            name: "common",
            chunks: "all",
            minChunks: 2,
            priority: -20,
        }
    }
}

happypack

转换文件算是打包过程中比较耗时的事情，通过 happypack 可以将这件事分摊给多个 node 进程，这样就会大大缩短了打包时间（同理，可以考虑使用 thread-loader）。不过进程之间的通信是要开销的，这是一个优化方向，要不要采用，还需要酌情考虑。

// loader
{
    test: /.m?jsx?$/,
    exclude: /node_modules/,
    use: "happypack/loader?id=js",
}
// plugins
new HappyPack({
    id: "js",
    threadPool: happyThreadPool,
    loaders: [{
    loader: "babel-loader",
    options: {
        cacheDirectory: true,
        presets: [["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": 3
        }], "@babel/preset-react"],
        plugins: ["@babel/transform-runtime",
        "@babel/plugin-proposal-class-properties", [
            "import",
            {
            "libraryName": "antd",
            "style": true
            }
        ]
        ]
    }
    }]
})

不喜欢多带带的 babel 文件，所以 babel 的配置都在这里了。其实，关于 babel 要配置的内容还是挺多的。不过不要怕，babel 的官方文档有详细说明。

DllReferencePlugin & DllPlugin

之前也提到过，通常我们会使用 optimization.splitChunks 来处理第三方库，将其分割成不变的部分。可是，每次打包的时候都需要重复这一步骤。
这时候我们就想啊，不变的部分打包一次不就可以了么，之后就只打包那些经常变化的部分，这样不就能提高效率了么？是的， DllReferencePlugin & DllPlugin 基本上要做的就是这么一回事。所以，我们会针对这两部分做不同的配置。

// webpack.dll.js
new webpack.DllPlugin({
    context: process.cwd(),
    path: path.join(__dirname, "..", "dist", "dll", "[name]-manifest.json"),
    name: "[name]_[hash]"
})
// webpack.common.js
new webpack.DllReferencePlugin({
    context: process.cwd(), 
    manifest: require(path.resolve(__dirname, "..", "dist", "dll", "vendor-manifest.json"))
}),

multi-spa-webpack-cli使用说明

multi-spa-webpack-cli 已经发布到 npm，只要在 node 环境下安装即可。一路按 Enter，全部源码都在里面！！！

npm install multi-spa-webpack-cli -g

使用步骤如下:

# 1. 初始化项目
multi-spa-webpack-cli init spa-project

# 2. 进入文件目录
cd spa-project

# 3. 安装依赖
npm install

# 4. 打包不变的部分
npm run build:dll

# 5. 启动项目（手动打开浏览器：localhost:8090）
npm start

webpack 系列：

浅尝 webpack

手写webpack脚手架的cli工具

webpack开发环境配置

GPU服务器云服务器开发环境配置 python开发环境配置 app开发环境配置 php开发环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104898.html

webpack多页应用架构系列（七）：开发环境、生产环境傻傻分不清楚？

摘要：开发环境和生产环境都拥有的配置，但在细节上有所不同，比如说，又比如说中的和参数。更重要的是，实际上开发环境和生产环境的配置文件的绝大部分都是一致的，对于这一致的部分来说，我们坚决要消除冗余，否则后续维护起来不仅麻烦，而且还容易出错。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/11900...

paulquei 2019-08-20 11:09 评论0 收藏0
webpack配置学习二-开发环境和打包环境执行不同打包

摘要：分开配置的原因前端项目的开发在开发过程中和上线时需要的依赖是不同的，所以要求使用打包的时候要能够在两种情况下执行不同的配置。在中的属性中配置开发打包命令和上线打包命令，指定不同的配置文件。分开配置的原因前端项目的开发在开发过程中和上线时需要的依赖是不同的，所以要求使用webpack打包的时候要能够在两种情况下执行不同的配置。带来的好处是上线的项目不依赖开发下的包，减少生产环境中所需...

gxyz 2019-08-23 13:46 评论0 收藏0
webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0
webpack4系列教程（九）：开发环境和生产环境

摘要：它允许在运行时更新各种模块，而无需进行完全刷新。构建生产环境开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的具有实时重新加载或热模块替换能力的和。 1. 构建开发环境如果你一直跟随我前面的博文，那么你对webpack的基础知识已经有比较深刻的理解了。之前，我们一直执行着： npm run build 来打包编译输出我们的代码，本文我们来看看如何构建一个开发环境，...

姘存按 2019-08-23 14:48 评论0 收藏0
基于webpack的前后端分离开发环境实战

摘要：背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现交互逻辑，后端负责业务数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重...

soasme 2019-08-22 11:03 评论0 收藏0
为什么我们要做三份 Webpack 配置文件

摘要：时至今日，已经成为前端工程必备的基础工具之一，不仅被广泛用于前端工程发布前的打包，还在开发中担当本地前端资源服务器模块热更新等角色，结合等代码检查工具，还可以实现在对源代码的严格校验检查。时至今日，Webpack 已经成为前端工程必备的基础工具之一，不仅被广泛用于前端工程发布前的打包，还在开发中担当本地前端资源服务器（assets server）、模块热更新（hot module repla...

silencezwm 2019-04-23 13:43 评论0 收藏0