Hexo

1:什么是webpack?

它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

2:为什么要用webpack?

1)模块化，让我们可以把复杂的程序细化为小的文件;
2)类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能转换为JavaScript文件使浏览器可以识别；
3)scss，less等CSS预处理器
………
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

3:webpack相对于其他前端自动化构建工具的优势所在？

优点：模块化

在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。

4.1:webpack的安装

在开始之前，请确保安装了 Node.js 的最新版本
1)要安装最新版本或特定版本，请运行以下命令之一：

1 2	npm install --save-dev webpack npm install --save-dev webpack@<version>

2)如果你使用 webpack 4+ 版本，你还需要安装 CLI。

1	npm install --save-dev webpack-cli

3)对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack：

1
2
3

"scripts": {
    "start": "webpack --config webpack.config.js"
}

4)总结来说3个基础安装步骤
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli –save-dev

4.2:webpack的简单入门

配置文件webpack.config.js
1)入口entry和出口output

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'
  }
};

2)loader加载器
原理:loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

1:首先安装对应的loader
告诉webpack加载css文件

1	npm install --save-dev css-loader

将 TypeScript 转为 JavaScript

1	npm install --save-dev ts-loader

2:在webpack.config.js中进行配置

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

3)插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

5:webpack支持的模块？

webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理非 JavaScript(non-JavaScript) _模块_，并且在 bundle 中引入这些依赖。 webpack 社区已经为各种流行语言和语言处理器构建了 loader，包括：

1)CoffeeScript
2)TypeScript
3)ESNext (Babel)
4)Sass
5)Less
6)Stylus
总的来说，webpack 提供了可定制的、强大和丰富的 API，允许任何技术栈使用 webpack，保持了在你的开发、测试和生成流程中无侵入性(non-opinionated)。