关于webpack的那些事情

webpack

1、谈谈你对webpack的看法：

webpack是模块打包工具，可以使用它管理项目中的模块依赖，并编译出模块所需的静态文件，它很好的管理、打包开发中所用到的html、css、js和静态文件等，让开发更加高效。对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

2、webpack的基本功能和工作原理？

1. 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等。
2. 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3. 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
4. 模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件。
5. 自动刷新：监听本地源代码的变化，自动构建，刷新浏览器。
6. 代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过。

3、webpack打包原理

将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载。

4、什么是webpack，与gulp,grunt有什么区别

• webpack是一个模块打包工具，可以递归地打包项目中的所有模块，最终生成几个打包后的文件。
• 区别：webpack支持代码分割，模块化（AMD,CommonJ,ES2015），全局分析

5、什么是bundle,chunk,module?

bundle是webpack打包出来的文件，chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块

6、webpack的内置属性和定义

1、enter：指定模块入口，告诉webpack要使用哪个模块作为构建项目的起，默认的为./src/index.js。
2、output：出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  
};

3、module： 配置文件解析规则

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader。
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },

4、plugins： 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。 plugin也是为了扩展webpack的功能，但是 plugin 是作用于webpack本身上的。而且plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。
--------- 由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例。取决于你的 webpack 用法，对应有多种使用插件的方式。

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

module.exports = {
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};

5、loader： loader 可以使你在 import 或 “load(加载)” 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！

如：css-loader和style-loader模块是为了打包css的
babel-loader和babel-core模块时为了把ES6的代码转成ES5
url-loader和file-loader是把图片进行打包的。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};
内

6、rosolve： 配置模块如何解析。

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};
// 结果就会变为这样
import Utility from '../../utilities/utility';

7、deserve： 实现本地http服务。

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

参考文献