webpack使用

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

#什么是 webpack?
what-is-webpack
webpack是一个静态文件打包器.当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle.
webpack 有四个核心概念:

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

此外,在 webpack4中,增加了 mode 的选项,通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化.

##入口起点(entry point)

单个入口写法

用法:entry: string|Array<string>
在 webpack.config.js 中配置:

const config = {
entry: './path/to/my/entry/file.js'
};

module.exports = config;

上面这种 entry 的写法是👇的简写:

const config = {
entry: {
    main: './path/to/my/entry/file.js'
}
};

向 entry 传入数组,会创建多个主入口(multi-main entry).

对象语法

用法:entry: {[entryChunkName: string]: string|Array<string>}
在 webpack.config.js中配置:

const config = {
entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
}
};

常见场景

分离应用程序(app)和第三方库(vendor)入口

在 webpack.config.js 中配置:

const config = {
entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
}
};

webpack 从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序(single page application)中。

多页面应用程序

在 webpack.config.js中配置:

const config = {
entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
}
};

webpack 需要 3 个独立分离的依赖图（如上面的示例）。

输出(OUTPUT)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件.即时存在多个入口起点,但只指定一个输出配置.

用法

在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:

  • filename 用于输出文件的文件名;
  • 目标输出目录 path 的绝对路径.

在 webpack.config.js 中配置

module.exports = {
output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
}
};

多个入口起点

如果配置了多个单独的 chunk,则应该使用占位符来确保每个文件具有唯一的名称.
module.exports = {
entry: {
app: ‘./src/app.js’,
search: ‘./src/search.js’
},
output: {
filename: ‘[name].js’,
path: __dirname + ‘/dist’
}
};

// 写入到硬盘：./dist/app.js, ./dist/search.js

模式

提供 mode 配置选项,告知 webpack 使用相应模式的内置优化.

用法

只在配置中提供 node 选项:

module.export = {
    mode:'production'
}

或者在 cli 参数中传递:
webpack --mode=production
支持一下字符串:

development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

none

不选用任何默认优化选项

loader

loader 用于对模块的源代码进行转换.loader 可以使你在 import 或加载模块时预处理文件.因此 loader 类似于替他构建工具中的任务(tesk),并提供了处理前端构建步骤的强大方法.loader 可以将文件从不同的语言转化成 JavaScript.

实例

可以使用 loader 告诉 webpack 加载 css 文件,为此首先安装相对应的 loader.
npm install css-loader -D
npm install ts-loader -D

//webpack.config.js
module.exports = {
module: {
    rules: [
    { test: /\.css$/, use: 'css-loader' },
    { test: /\.ts$/, use: 'ts-loader' }
    ]
}
};

使用 loader

有三种 使用 loader 的方式:

  • 配置>在 webpack.config.js文件中指定 lodaer.
  • 内联>在每个 import 语句中显式指定 loader.

  • cli>在 shell 命令中指定他们.

    配置[configuration]

    module.exports = {
    module: {

    rules: [
{
    test: /\.css$/,
    use: [
    { loader: 'style-loader' },
    {
        loader: 'css-loader',
        options: {
        modules: true
        }
    }
    ]
}
]

    }
    };

    内联

    可以在 import 语句或者任何等效于 import 的方式中指定 lodaer.使用 ! 来将资源中的 loader 分开.分开的每个部分都相对于当前目录解析.
    import Styles from 'style-loader!css-loader?modules!./styles.css';

    cli

    webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
    这会对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader.

    loader特性

  • loader 支持链式传输,loader 链中每个 loader,都对前一个 loader 处理后的资源进行转换.
    • loader 可以是同步的,也可以是异步的.
    • loader 可以运行在 node.js中,并且能够执行任何可能的操作.
    • loader 接受查询参数.
    • loader 能够使用 options 对象进行配置.
    • 除了使用package,json 常见的 main 属性,还可以将普通的 npm 模块导出为 loader,做法是在 package.json中定义一个 lodaer 字段.
    • 插件(plugins)可以为 loader 带来更多特性.
    • loader 能够产生额外的任意文件.

      插件(暂时跳过)

      配置[configuration]

      webpack 的配置文件,是导出一个对象的 JavaScript 文件,此对象由 webpack 根据对象定义的属性进行解析.
      因为 webpack 是标准的 node.js commonJS 模块,因此可以:
  • 通过 require 导入其他文件.
  • 通过 require 使用 npm的工具函数.
  • 使用 JavaScript 控制流表达式.
  • 对常用值使用常量或者变量.

  • 编写并执行函数来生成部分配置.

    基本配置

    //webpack.config.js
    var path = require(‘path’);
    module.exports = {
    mode: ‘development’,
    entry: ‘./foo.js’,
    output: {

    path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'

    }
    };

    模块(modules)

    在模块化编程中,开发者将程序分解成离散功能块,并称之为模块.

    webpack模块

  • ES 2015 import 语句
  • CommonJS require()语句
  • AMD define 和 require 语句
  • css/sass/less 文件中的@import 语句
  • 样式或 html 文件中的图片链接
thank u !