菜单

【新金沙国际娱乐】webpack四 体系教程(四): 单页面解决方案–代码分割和懒加载

2019年5月4日 - 金沙前端

本节课疏解webpack4打包单页应用经过中的代码分割和代码懒加载。分化于多页面使用的提取公共代码,单页面包车型地铁代码分割和懒加载不是透过webpack配备来达成的,而是通过webpack的写法和停放函数实现的。

Ba la la la ~ 读者朋友们,你们好啊,又到了冷锋时间,话不多说,发车!

本文来源尚妆前端团队南洋

发表于尚妆github博客,接待订阅。

介绍

webpack是一款模块加载器兼打包工具,它能把各个能源JS/CSS/图片等都当做模块来选取和处理。
webpack 是以 commonJS 的花样来书写脚本,对 AMD/CMD
的协理也很周全,方便别的模块也协作使用
扩充性强,插件机制周详,能被模块化管理的财富多,例JS/CSS/IMG
付出方便人民群众,能代替部分 grunt/gulp
的办事,比方打包、压缩混淆、图片转base64等。

目前webpack本着此项作用提供 二 种函数:


分割webpack配置文件的有余主意

安装

webpack依赖于Node.js,所以安装webpack事先一定要先安装
Node.js
npm install webpack -g 全局安装webpack就足以在其它地点使用了
webpack -h 重临一些扶植的新闻(表明已经设置成功)

  1. import()金沙js777,: 引进并且自动施行有关 js 代码
  2. require.ensure(): 引进但必要手动推行相关 js 代码

金沙js77888,webpack是什么

webpack是三个js打包工具,不是一个完好无损的前端创设筑工程具。它的风靡得益于模块化和单页应用的流行。webpack提供扩充机制,在高大的社区接济下种种气象基本它都可找到化解方案。本文的目标是教会你用webpack消除实战中常见的标题。

(一)

将您的布署消息写到八个分散的文件中去,然后在施行webpack的时候利用--config参数钦点要加载的布署文件,配置文件利用moduleimports导出。你能够在webpack/react-starter
看到是行使那种发方法的。

// webpack 配置文件

|-- webpack-dev-server.config.js
|-- webpack-hot-dev-server.config.js
|-- webpack-production.config.js
|-- webpack.config.js

// npm 命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev-server": "webpack-dev-server --config webpack-dev-server.config.js --progress --colors --port 2992 --inline",
    "hot-dev-server": "webpack-dev-server --config webpack-hot-dev-server.config.js --hot --progress --colors --port 2992 --inline",
    "build": "webpack --config webpack-production.config.js --progress --profile --colors"
  },

使用

mkdir webpack-test
cd webpack-test/
npm init -y 生成 package.json
npm install webpack --save-dev 安装到当下项目开支依赖里面
用编辑器展开当前项目文件夹
新建3个 entry.js
代码:

document.getElementById('app').textContent = 'hello !'; 

新建五个初阶化 html (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-test</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

然后在命令行实行:

webpack entry.js  bundle.js  // webpack 入口文件  生成新文件

目录下就生成了 bundle.js
用浏览器张开 index.html ,页面输出 hello ! 表明打包落成

正文将会议及展览开依次讲授。

webpack原理

新金沙国际娱乐,在深远实战前先要知道webpack的运作规律

(二)

调用第1方的webpack工具,使用其集成的api,方便进行webpack配置。HenrikJoreteg/hjs-webpack
那些repo就是那样做的。

var getConfig = require('hjs-webpack')


module.exports = getConfig({
  // entry point for the app
  in: 'src/app.js',

  // Name or full path of output directory
  // commonly named `www` or `public`. This
  // is where your fully static site should
  // end up for simple deployment.
  out: 'public',

  // This will destroy and re-create your
  // `out` folder before building so you always
  // get a fresh folder. Usually you want this
  // but since it's destructive we make it
  // false by default
  clearBeforeBuild: true
})

和别的模块一同打包

当前目录下开创3个 name.js
用模块倒出的点子出口

module.exports = 'boloog';

修改 entry.js 引入name框架

var name = require('./name');
document.getElementById('app').textContent = 'hello - ' + name;

接下来在命令行推行:
webpack entry.js bundle.js
页面输出 hello – boloog 表明打包完毕

>>>
本节课源码

webpack宗旨概念

entry 一个可实行模块或库的输入文件。
chunk
八个文件组成的二个代码块,比方把一个可进行模块和它具备信赖的模块组成和2个chunk 那显示了webpack的包裹机制。
loader 文件转变器,比如把es陆转换为es五,scss转变为css。
plugin
插件,用于扩展webpack的功用,在webpack营造生命周期的节点上进入扩张hook为webpack参预作用。

(三) Scalable webpack configurations

ones that can be reused and combined with other partial configurations

在单个配置文件中爱护布署,可是分别好标准分支。调用不相同的npm命令时候设置不一致的遭逢变量,然后在分层中相称,重返大家须求的配置文件。

那样做的裨益可以在3个文书中管理分裂npm操作的逻辑,并且能够共用同一的配置。webpack-merge其一模块能够起到联合配置的功能。

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

switch(process.env.npm_lifecycle_event) {
  case 'build': 
    config = merge(common, 
      parts.clean(PATHS.build),
      parts.setupSourceMapForBuild(),
      parts.setupCSS(PATHS.app),
      parts.extractBundle({
        name: 'vendor',
        entries: ['react', 'vue', 'vuex']
      }),
      parts.setFreeVariable('process.env.NODE_ENV', 'production'),
      parts.minify()
      );
    break;
  default: 
    config = merge(common, 
      parts.setupSourceMapForDev(),
      parts.devServer(), 
      parts.setupCSS(PATHS.app));
}

// minify example
exports.minify = function () {
  return {
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
          drop_console: true
        },
        comments: false,
        beautify: false
      })
    ]
  }
}

安装loader (转换器)

当前 webpack 只可以管理js文件,管理css文件须要设置
loader(css-loader style-loader)
npm install css-loader style-loader --save-dev
安装到当下项目到支付信赖

创立一个 style.css

body{
    background-color: red;
    color: #fff;
    font-size: 30px;
}

修改 entry.js 引入css

var name = require('./name');
require('style-loader!css-loader!./style.css');
document.getElementById('app').textContent = 'hello - ' + name;

然后在命令行实施:
webpack entry.js bundle.js
页面输出 hello – boloog 字体灰湖绿,背景森林绿,表达打包达成

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图