快捷搜索:
来自 新京葡娱乐场网址 2019-11-01 11:15 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

4正式发布,Webpack学习笔记

代号: _Legato

今天我们愉快的宣布 webpack 4(Legato)正式发布了!你可以使用 yarn 或者 npm 获得它:

JavaScript

$> yarn add webpack --dev

1
$> yarn add webpack --dev

或者

JavaScript

$> npm i webpack --save-dev

1
$> npm i webpack --save-dev

Loaders

通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理,比如说分析JSON文件并把它转换为JavaScript文件,或者说把下一代的JS文件(ES6,ES7)转换为现代浏览器可以识别的JS文件。

Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,Loaders的配置选项包括以下几方面:

|选项|描述|是否必须|
|test|一个匹配loaders所处理的文件的拓展名的正则表达式|是|
|loader|loader的名称|是|
|include/exclude|手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)|否|
|query|为loaders提供额外的设置选项|否|

我们把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值,配置方法如下:

  1. 首先安装可以读取json文件的值的loader
npm install --save-dev json-loader
  1. webpack.config.js中进行配置json-loader:
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            }
        ]
    },
}
  1. 创建带有问候信息的JSON文件(在app下创建config.json文件)
{
  "greetText": "Hi there and greetings from JSON!"
}
  1. 更新app/Greeter.js的内容为:
//从config.json读取
var config = require('./config.json');

module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = config.greetText;
    return greet;
};

‍ 各框架 cli 工具支持怎么样了?

在过去的一个月我们也为每个框架的脚手架工作确保它们能支持 webpack 4。甚至最流行的库例如 lodash-es, RxJS 已经支持 sideEffects 选项,因此使用它们的最新版后你会发现打包体积会大幅度的减小。

AngularCLI 团队已经计划在近几周即将发布的大版本中直接使用 webpack 4!如果你想要知道最新进展,可以直接联系他们,并询问他们你能帮什么忙而不是直接询问它什么时候发布

CSS module

CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递都所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中具有相同的类名可能会造成的问题.

  1. 更新webpack.config.js内容,使其能使用CSS module
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                //在webpack的module部分的loaders里进行配置即可
                loader: 'babel-loader',
            },
            {
                test: /.css$/,
                //添加对样式表的处理
                //仅仅添加了?modules-loader
                loader: 'style-loader!css-loader?modules-loader'
            }
        ]
    },
}
  1. app文件夹下创建Greeter.css并增加内容为:
.root {
  background-color: #eee;
  padding: 10px;
  border: 3px solid #ccc;
}
  1. 导入.rootGreeter.js中,更新Greeter.js内容为:
import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//导入

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>//添加类名
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

模块类型简介以及 .mjs 支持

之前,JS 一直都是 Webpack 唯一的一等模块类型。当用户不需要使用 CSS/HTML 的时可能会造成一些麻烦。我们基于新的 API 抽象实现了 JS 类型。目前,我们已经支持5种模块类型实现:

  • javascript/auto: _(webpack 3 默认值)_ 所有的 JS 模块规范都可用:CommonJS,AMD,ESM
  • javascript/esm:EcmaScript 模块规范,其它的模块规范都不可用 (.mjs 文件的默认值)
  • javascript/dynamic: 仅支持 CommonJS 和 AMD,EcmaScript 模块规范不可用
  • json: JSON 数据,使用 requireimport 导入 JSON 数据时可用 (.json 文件的默认值)
  • webassembly/experimental: WebAssembly 模块 (.wasm 文件的默认值,目前还是试验阶段)
  • 另外 webpack 支持直接查找 .wasm, .mjs, .js.json 后缀文件

最让人激动的是,我们甚至可以支持 CSS 和 HTML 模块类型(计划在 webpack 4.x – 5 间版本实现)。 它将允许我们直接将 HTML 作为入口文件!

安装node.js

在终端输入以下命令即可

$ sudo apt-get install nodejs

✂ 再见 CommonsChunkPlugin

在新版中我们废弃并移除了 CommonsChunkPlugin,并且使用一些默认值以及更容易被复写的新 API optimize.splitChunks 来代替它。现在你可以在大部分场景中享受自动分块带来的便利了!

如果想要了解更多该 API 可以查看这篇文章:webpack 4: 代码分块以及分块优化

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

还有!

还有更多的特性没有在本文列出,我们强烈建议大家去看一下我们的官方更新日志

如何使用插件

要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组)

  1. 添加一个显示版权声明的插件,在webpack.config.js中更新内容如下
var webpack = require('webpack');

module.exports = {
    ...
    ...
    ...

    plugins: [
        //在这个数组中new一个就可以了
        new webpack.BannerPlugin("Copyright Flying Unicorns inc.")
  ],
}

为什么叫 Legato?

首先我们会开始一个新传统:为我们以后的每个大版本设定代号!因此,我们决定将命名这个特权给予我们最大的 OpenCollective 捐赠者:trivago

当我们向其发出请求后他们是这么回复我们的:

[在 trivago] 我们通常以音乐主题来命名我们的项目。例如,我们之前的 JS 框架叫 “Harmony”,我们的新框架叫“Melody”。PHP 的话我们使用基于 Symfony 上层封装,我们叫它“Orchestra”。 Legato 意味着毫无间隙地连续演奏每个节奏。 这点和 Webpack 很像,Webpack 将我们的前端资源(JS,CSS甚至更多)无间隙的打包在一起。因此我们相信 “Legato” 这个代号会适合 Webpack。 ——  Patrick Gotthardt

我们得知后也非常地激动,因为新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。非常感谢过去的这些年 trivago 对 webpack 的无私捐赠支持,更感谢其为 webpack 4 命名!

引申阅读:trivago 帮助保护 webpack 的未来

HtmlWebpackPlugin

这个插件的作用是依据一个简单的模板,帮你生成最终的Html5文件,这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。

这个插件自动完成了我们之前手动做的一些事情,在正式使用之前需要对一直以来的项目结构做一些改变:

  1. 移除public文件夹,利用此插件,HTML5文件会自动生成,此外CSS已经通过前面的操作打包到JS中了,public文件夹里。

  2. 在app目录下,创建一个Html文件模板,这个模板包含title等其它你需要的元素,在编译过程中,本插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon等文件,在本例中我们命名模板文件名称为index.tmpl.html,模板源代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>
  1. 更新webpack的配置文件,方法同上,新建一个build文件夹用来存放最终的输出文件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    ...
    ...
    ...

    output: {
        //打包后的文件存放的地方
        path: __dirname   "/build",
        //打包后输出文件的文件名
        filename: "bundle.js"
    },
    ...
    ...
    ...

    plugins: [
         new HtmlWebpackPlugin({
            template: __dirname   "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
        })
  ],
}

如果你正在使用 HtmlWebpackPlugin

在发布之前我们预留了一个月的时间 来升级所有的插件和 loader 以适配 webpack 4 的 API。然而,Jan Nicklas 因为工作原因没办法参加,因此我们不得不发布了一个 html-webpack-plugin 的 fork 版。你可以使用如下命令安装它:

JavaScript

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

1
$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

当 Jan 本月底从海外工作回来时,我们会将我们的更新合并回 jantimon/html-webpack-plugin 仓库中!在此之前,如果你有任何问题,可以提交到这里!

如果你是插件或 loader 的开发者,你可以查看我们的迁移指南:webpack 4: 插件/loader 迁移指南

使用webpack构建本地服务器

Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现监测你的代码的修改,并自动刷新修改后的结果,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖。安装命令如下

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的一项,具有以下配置选项

devserver配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面
colors 设置为true,使终端输出的文件为彩色的
historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

webpack.config.js中进行配置devserver:

module.exports = {
    //配置生成Source Maps,选择合适的选项
    devtool: "eval-source-map",
    //唯一入口文件
    entry: __dirname   "/app/main.js",
    output: {
        //打包后的文件存放的地方
        path: __dirname   "/public",
        //打包后输出文件的文件名
        filename: "bundle.js"
    },

    devServer: {
        //本地服务器所加载的页面所在的目录
        contentBase: "./public",
        //终端中输出结果为彩色
        colors: true,
        //不跳转
        historyApiFallback: true,
        //实时刷新
        inline: true
    }
}

v4 的文档在哪?

我们马上要完成迁移指南和v4 的文档了。你可以访问 文档仓库 切换到 next 分支来获取更新情况,当然能搭把手帮个忙是再好不过了!

Babel的配置选项

Babel可以在webpack.config.js中进行配置页可以分块单独配置,当配置较多时,最好单独配置创建一个.babelrc的babel配置文件,webpack会自动调用.babelrc其中的配置选项。

  1. 更新webpack.config.js内容为:
module.exports = {
    ...
    ...
    ...

    //在配置文件里添加JSON loader
    module: {
        loaders: [
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                //在webpack的module部分的loaders里进行配置即可
                loader: 'babel-loader',
            }
        ]
    },
}
  1. 创建.babelrc文件并添加内容如下:
{
  "presets": ["react", "es2015"]
}

️‍ 有什么更新?

webpack 4 有太多的新东西可以说了,但是我不可能在本文中列举所有的内容,否则这篇文章就要推迟很久才能发布了。因此下面我会和大家分享一些我觉得有趣的更新内容,如果大家想要看所有的更新的话可以查阅 webpack 4 的更新日志

模块

Webpack有一个不可不说的优点,它把所有的文件都可以当做模块处理,包括你的JavaScript代码,也包括CSS和fonts以及图片等等等,只有通过合适的loaders,它们都可以被当做模块被处理。

为什么你用如此多的 emoji 表情?

因为这样写文章很开心呀!大家也可以试试 。

使用Webpack

  1. 创建一个工作目录,并进入这个目录创建一个项目,在终端输入以下命令,会自动生成一个package.json文件,这是一个标准的npm说明文件,里面包含了一些信息,包含了项目的依赖模块,自定义脚本任务等。
npm init

输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。

  1. 在本项目中安装Webpack作为依赖包,在终端输入以下命令
npm install --save-dev webpack
  1. 创建app和public文件夹

    • app文件夹用来存放原始数据和我们将写的JavaScript模块
    • public文件夹用来存放准备给浏览器读取的数据(包括使用webpack生成的打包后的js文件以及一个index.html文件)
  2. 创建几个html和js文件做一个简单的例子

    • public下创建index.html文件,加载通过webpack打包之后的bundle.js文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
    </head>
    <body>
        <div id='root'>
        </div>
        <script src="bundle.js"></script>
    </body>
    </html>
    
    • app目录下创建Greeter.js,用来返回一个简单的文字信息的html元素的函数
    module.exports = function() {
        var greet = document.createElement('div');
        greet.textContent = "Hi there and greetings!";
        return greet;
        };
    
    • app目录下创建main.js,用来把Greeter模块返回的结点插入页面
    var greeter = require('./Greeter.js');
    document.getElementById('root').appendChild(greeter());
    
  3. 使用webpack进行打包
    基本命令为

webpack {entry file/入口文件} {destination for bundled file/存放bundle.js的地方}

只需要指定一个入口文件,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack没有进行全局安装,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址,继续上面的例子,在终端中属于如下命令

node_modules/.bin/webpack app/main.js public/bundle.js

执行结果如下,可以看到帮我们打包了两个文件

图片 1

webpack命令打包

打开浏览器访问index.html可以看到如下结果

图片 2

打包后index结果

  • webpack还有许多功能,通过命令行都可以实现,但是命令多了不好记也容易出错,所以webpack也提供了配置文件方式,在项目根目录下创建webpack.config.js文件,在其中编写我们所需要的配置。

    module.exports = {
        //唯一入口文件
        entry: __dirname   "/app/main.js",
        output: {
            //打包后的文件存放的地方
            path: __dirname   "/public",
            //打包后输出文件的文件名
            filename: "bundle.js"
        }
    }
    

    注:__dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
    接下来指定打包命令只需要在终端中输入webpack即可。执行的结果和用命令一致。

  • 打包操作还可以更简单,为了解决命令复杂且多的问题,npm还提供了引导任务执行的功能。对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可,设置方法如下。

{
  "name": "first_webpack_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    //配置start命令
    "start": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.4.1"
  }
}

注:npm的start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build,以下是执行npm start后命令行的输出显示

图片 3

npm start结果

再次感谢

对于我们的贡献者团队,核心团队,loader 和插件作者,那些第一次提交他们的提交,或者帮助解决故障的人:我们不能不感谢你们。这个产品是为你而生的,你们帮助塑造了它

2018 我们将注定要抛弃老古董思维,迎接 JS 的美丽复兴!❤

我之前已经多次强调过,在 JS 复兴 的今天,没有社区的帮忙,webpack 是不会变的如此强大,可持续以及蓬勃的生长。如果没有你们的帮助,webpack 可能现在也还只是另外一款普通的构建工具[Yet Another Build Tool (YABT)]而已。

via:

1 赞 收藏 评论

图片 4

安装webpack

  1. 全局安装
    在终端输入
sudo npm install -g webpack
  1. 局部安装
    进入项目目录,并在终端中输入
npm install --save-dev webpack

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:4正式发布,Webpack学习笔记

关键词: