关于前端:webpack-与-gulp

一、webpack

1、概念

webpack 是用于 js 的动态模块的打包工具，在解决时，会从外部一个或多个入口构建依赖，将每一个模块组合成一个或多个 bundles，作为动态资源，用于展现内容。

2、模块

• 入口(entry)
• 输入(output)
• loader
• 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)
• 环境(environment)

3、入口
批示 webpack 应该应用哪个模块、来构建依赖。
webpack.config.js

module.exports = {entry: './path/to/my/entry/file.js',};

4、输入
通知 webpack 在哪里输入它所创立的 bundle，以及如何命名这些文件。次要输入文件的默认值是 ./dist/main.js，其余生成文件默认搁置在 ./dist 文件夹中

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

5、loader
loader 让 webpack 可能去解决其余类型的文件，并将它们转换为无效 模块，以供应用程序应用，以及被增加到依赖图中。

loader 有两个属性：
use
test

const path = require('path');

module.exports = {
  output: {filename: 'my-first-webpack.bundle.js',},
  module: {rules: [{ test: /\.txt$/, use: 'raw-loader'}],
  },
};

file-loader：把文件输入到一个文件夹中，在代码中通过绝对 URL 去援用输入的文件
url-loader：和 file-loader 相似，然而能在文件很小的状况下以 base64 的形式把文件内容注入到代码中去
source-map-loader：加载额定的 Source Map 文件，以不便断点调试
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
css-loader：加载 CSS，反对模块化、压缩、文件导入等个性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
eslint-loader：通过 ESLint 查看 JavaScript 代码

6、插件（plugin）
loader 用于转换某些类型的模块，而插件则能够用于执行范畴更广的工作。包含：打包优化，资源管理，注入环境变量

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 装置
const webpack = require('webpack'); // 用于拜访内置插件

module.exports = {
  module: {rules: [{ test: /\.txt$/, use: 'raw-loader'}],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html'})],
};

7、模式
通过抉择 development, production 或 none 之中的一个，来设置 mode 参数，你能够启用 webpack 内置在相应环境下的优化。其默认值为 production

module.exports = {mode: 'production',};

二、gulp