webpack4.0打包优化策略(二)

时间  2019-11-06
标签 webpack4.0 webpack 打包 优化 策略 繁體版
原文   原文链接

打包优化策略

区分开发和生产环境

一般咱们在开发网页时须要区分构建环境css

  • 开发环境(development) 开发过程当中方便开发调试的环境
  • 生产环境(production) 发布到线上使用的运行环境

经过npm命令区分

经过cross-env模块设置环境变量html

cross-env 跨平台地设置及使用环境变量,而没必要担忧为平台正确设置或使用环境变量。vue

npm i cross-env -D
复制代码

Usage

npm scripts中:node

{
    "scripts": {
        "build": "cross-env NODE_ENV=production webpack --mode production",
        "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development",
    }
}
复制代码

执行npm命令切换环境react

npm run build // 生产环境 process.env.NODE_ENV === 'production'
npm run dev // 开发环境 process.env.NODE_ENV === 'development'
复制代码

接下来咱们就能够在webpack.config.js 经过process.env.NODE_ENV来得知当前环境标识webpack

代码中区分环境

定义环境常量

webpack4之前都是经过DefinePlugin来定义NODE_ENV环境变量，以决定library中应该引用哪些内容。git

NODE_ENV是一个由Node.js暴露给执行脚本的环境变量。一般用于决定在开发环境与生产环境下，服务工具、构建脚本和客户端library的行为。github

在webpack.config.js 中添加DefinePlugin插件web

const webpack = require('webpack');

plugins: [
    new webpack.DefinePlugn({
       'process.env': {
           'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
       }
    })
]
复制代码

在main.js中经过判断process.env.NODE_ENV常量 来执行相应逻辑vue-cli

mode模式配置

在webpack4 增长了mode模式配置 在浏览器环境下指定了 process.env.NODE_ENV 的值，默认是development，但node环境中仍是须要cross-env来设置。 mode 是 webpack 4 中新增长的参数选项，其有两个可选值：production 和 development。mode 不可缺省，须要二选一：

production 模式：
  • 1.生产环境默认开启了不少代码优化（minify，splite等）
  • 2.开发时开启注视和验证，而且自动加上了eval devtool
  • 3.生产环境不支持watching，开发环境优化了从新打包的速度
  • 4.默认开启了Scope hoisting和Tree-shaking（原ModuleConcatenationPlugin）
  • 5.自动设置process.env.NODE_ENV到不一样环境，也就是不须要DefinePlugin来作这个了
  • 6.若是你给mode设置为none，全部默认配置都去掉了
  • 7.若是不加这个配置webpack会出现提醒，因此仍是加上吧

development 模式：

  • 1.主要优化了增量构建速度和开发体验

  • 2.process.env.NODE_ENV 的值不须要再定义，默认是 development

  • 3.开发模式下支持注释和提示，而且支持 eval 下的 source maps

const NODE_ENV = process.env.NODE_ENV;
if (NODE_ENV === 'development') { // 开发环境下执行下面代码
    console.log('development', NODE_ENV);
} else { // 生产环境则执行如下环境
    console.log('production', NODE_ENV);
}

复制代码

DefinePlugn

DefinePlugin 容许建立一个在编译时能够配置的全局常量。这可能会对开发模式和发布模式的构建容许不一样的行为很是有用。

webpack配置中区分环境

在项目目录中添加webpack配置文件

  • webpack.base.config.js 保存webpack基础通用的配置的文件
  • webpack.dev.config.js 保存webpack开发环境配置的文件
  • webpack.prod.config.js 保存webpack生成环境配置的文件
  • webpack.config.js webpack执行配置文件 保存相应环境的配置和webpack基础配置文件合并后的配置

基础配置 webpack.base.config.js

webpack一些loader配置

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HappyPack = require('happypack');
const os = require('os'); // 系统操做函数
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length}); // 指定线程池个数

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    entry: {
        app: './src/main.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                // use: 'babel-loader?cacheDirectory'
                use: 'happypack/loader?id=babel', // 缓存loader执行结果
                exclude: /node_modules/, // 排除不要加载的文件夹
                include: path.resolve(__dirname, 'src') // 指定须要加载的文件夹
            }
        ],
        noParse: function(content) { // content 从入口开始解析的模块路径
            return /no-parser/.test(content); // 返回true则忽略对no-parser.js的解析
        }
    },
    resolve: {
        modules: [ // 优化模块查找路径
            resolve('src'),
            resolve('node_modules') // 指定node_modules所在位置 当你import第三方模块式 直接从这个路径下搜寻
        ],
        alias: {
            funs$: resolve('src/util/funs.js')
        },
        extensions: ['.js', '.vue']
    },
    plugins: [
        new webpack.DefinePlugin({ // 定义环境变量
            "process.env": JSON.stringify(process.env.NODE_ENV)
        }),
        new HappyPack({
            id: 'babel',
            loaders: ['babel-loader?cacheDirectory'],
            threadPool: happyThreadPool,
            verbose: true
        }),
        new HtmlWebpackPlugin({
            template: resolve('index.html'),
            title: 'hello webpack!'
        })
    ]
}
复制代码

开发配置webpack.dev.config.js

开发时的输入输出以及开发调试配置 如 devServer devtool 配置

const webpack = require('webpack');

module.exports = {
    plugins: [
       new webpack.DefinePlugin({
           'process.env': {
               'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
           }
       })
    ],
    devServer: {
        contentBase: resolve('dist'),
        compress: true,
        port: 9000
    }
};
复制代码

生成环境webpack.prod.config.js

生成环境 进行压缩 代码分离等代码优化 线上配置

const webpack = require('webpack');
const path = require('path');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');

module.exports = {
    plugins: [
        new webpack.DllReferencePlugin({
            manifest: require(path.join(__dirname, 'dll', 'react.manifest.json'))
        }),
        new ParallelUglifyPlugin({
            workerCount: 4, // 开启几个子进程去并发的执行压缩，默认是当前电脑的cpu数量减1
            uglifyJS: {
                output: {
                    beautify: false, // 不须要格式化
                    comments: false // 保留注释
                },
                compress: {
                    warnings: false, // Uglifyjs 删除没有代码时，不输出警告
                    // drop_console: true, // 删除全部console语句
                    collapse_vars: true,
                    reduce_vars: true
                }
            }
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'index.html')
        }),
        new HtmlIncludeAssetsPlugin({
            assets: ['/dll/react.dll.js'],
            append: false
        })
    ]
};
复制代码

webpack.config.js 配置合并

借助webpack-merge 将base配置和相应环境配置 合并到'webpack.config.js'

npm i webpack-merge -D
复制代码

webpack.config.js

const base = require('./webpack.base.config');
const merge = require('webpack-merge');

let config;
if (process.env.NODE_ENV === 'production') {
    config = require('./webpack.prod.config');
} else {
    config = require('./webpack.dev.config');
}

module.exports = merge(base, config);
复制代码

运行生产配置

npm run build
复制代码

运行开发配置

npm run dev
复制代码

实时从新加载(live reloading) 和 模块热替换(HMR)

webpack-dev-server 为你提供了一个简单的 web 服务器，而且可以实时从新加载(live reloading)。

让咱们设置如下：

npm i webpack-dev-server -D
复制代码

配置webpack.dev.config.js

devServer: {
    contentBase: path.join(__dirname, 'dist'), // 将 dist 目录下的文件，做为可访问文件。
    compress: true, // 开启Gzip压缩
    port: 9000, // 端口号
    inline: true // 在打包后文件里注入一个websocket客户端
}
复制代码

npm scripts

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development"
    }
}
复制代码

启动server

npm run dev
复制代码

浏览器访问localhost:9000 当修改代码ctrl+s 将自动刷新浏览器

启用HMR

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它容许在运行时更新各类模块，而无需进行彻底刷新。

配置webpack.dev.config.js

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    inline: true,
    hot: true // 开启HMR
}
复制代码

注意 此外咱们还需添加NamedModulesPlugin 和 HotModuleReplacementPlugin 插件

webpack.dev.config.js

{
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}
复制代码

其余代码和框架开启热替换

1.React Hot Loader（实时调整 react 组件）

Install

npm install react-hot-loader
复制代码

Getting started

1.1 Add react-hot-loader/babel to your .babelrc:

// .babelrc

{
    "plugins": ["react-hot-loader/babel"]
}
复制代码

1.2 Mark your root component as hot-exported:

// App.js
import React from 'react'
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default hot(module)(App)
复制代码

2.Vue loader

vue-cli 已经集成 只需用vue-cli脚手架开发便可

HMR修改样式表

借助于style-loader的帮助，CSS的模块热替换其实是至关简单的。

安装以下loader：

npm i style-loader css-loader -D
复制代码

HMR参考配置

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程