webpack

webpck：资源打包工具，多个资源转换为某一个或多个块

具体分为：入口、输出、模式、loader、插件

入口和输出官网 https://www.webpackjs.com/concepts/mode/

在此只记录一部分。

模式：

模式只在配置中提供mode，

cli、配置参数，不同的模式启动插件不同。

webpack --mode=production

loader：预处理文件，类似任务，关于gulp 等其他工具还是没弄清楚怎么用。

loader 可以将typescript 等语言转换为标准的js，转换前需下载指定的loader

这里以css 为例子，安装模块

npm install --save-dev css-loader

 除了直接在配置文件中配置还有通过内联和cli两种方式

内联： import  !感叹号用来区分loader（js 中使用import-es6）但是node环境中是使用commonJS 规范，如果使用import 需要进行一定的配置，配置方法见 阮一峰大神的es6 最后几个章节（没看）

所以还不如直接使用配置文件、。。。

import Styles from 'style-loader!css-loader?modules!./styles.css';

cli：通过--module-bind 配置项

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

loader 串联：

链式是按照相反的顺序执行，也就是说上面的实例会先执行css-loader 然后才是 css。

• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。（还没弄清怎么配置

 

插件： loader 做不到的用插件

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。（没闹明白）

 

配置：

因为配置文件本身是js 且基于标准的COMMONJS 规范，所以可以使用require函数导入模块，使用js表达式，定义常量、变量、执行函数等等。

 

webpack 模块能够以各种方式表达它们的依赖关系：

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• css/sass/less 文件中的 @import 语句。
• 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

另外关于 node 中使用es2015的模块引入、import 和export，

node --experimental-modules es6_test.mjs

js后缀改为mjs、执行命令前需启动这个参数（执行会有提示，尚处于实验阶段，所以可以先不用，另外提及一下在浏览器中使用import模块的话需要增加module标识  type=“module”）

 

targets：

因为服务器和浏览器代码都可以用 JavaScript 编写，所以 webpack 提供了多种构建目标(target)，你可以在你的 webpack 配置中设置。

打包2份-一个针对浏览器一个针对node

module.exports = {
  target: 'node'
};

var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

var clientConfig = {
  target: 'web', // <=== 默认是 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];