webpack开篇杂论

前言

阅读之前首先我们要有以下疑问

• webpack是什么
• 为什么要使用webpack

github webpack5+ts+react脚手架源码

github.com/xiloudada/w…

webpack核心

webpack是一个javascript的静态模块打包器，因为本身只能处理js，json文件，有了loader概念，使用loader可以处理css，html等等一些文件类型。我们想要更多的功能，更广的任务处理，有了plugins这个概念，plugins可以让我们有各种各样的功能。开发时，有生产环境和测试环境区分，有了mode这个概念，来区分环境。

我们为什么要使用webpack那？前端之前的开发模式，通过script标签来引入js文件，js之间没有强依赖关系，如果我们在当前的js文件引用其他js文件的变量或方法，那么被引用的js文件顺序一定要在当前使用的js文件之前先加载，随着项目的越来越大，依赖关系越来越复杂，模块化的概念可以让js文件之间相互引用，不用担心排列顺序。浏览器如果加载很多的js文件，会影响页面的加载速度，webpack可以把多个关联的文件打包在一起，减少文件的数量，提升加载速度。

entry

入口告诉webpack从哪个模块作为构建内部依赖图的开始,可以配置多个入口，webpack5如果不配置默认为src/index文件

module.exports = {
  entry: {
    app: './src/index.tsx',
    b: './src/app.tsx',
  },
};

output

output属性告诉webpack在哪里输出它创建的bundle，如何命名这些文件，webpack5可以不进行配置，会默认输出到dist目录下

module.exports = {
  output: {
    filename: 'js/[chunkhash:10].bundle.js',
    path: resolve(__dirname, 'dist'),
  },
};

loader

loader能够让webpack处理那些非javascript文件，把它们转换成webpack能够处理的模块，然后利用webpack打包的能力对他们进行处理，loader需要安装，例如css-loader

module.exports = {
  module: {
    rules: [
      {
        // 剥离css代码，配置了MinCssExtractPlugin.loader，就不需要style-loader
        test: /\.css$/,
        use: [{ loader: MinCssExtractPlugin.loader }, { loader: 'css-loader' }],
        include: resolve(__dirname, 'src'),
        exclude: /node_modules/,
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
    ],
  },
};

plugins

插件可以执行范围更广的任务，例如:压缩，去除空格，

module.exports = {
  plugins: [
  // 会自动创建一个html文件，把webpack打包后的文件自动插入到html文件中
    new HtmlWebpackPlugin({ template: 'public/index.html' }),
    }),
  ],
};

mode

通过选择生产环境或者开发环境来使用webpack内置的优化，也可以做环境区分

module.exports = {
  mode: 'development', // 选择开发环境
};
};

总结

• webpack可以处理模块之间的相互依赖关系，把多个相互关联的文件打包成一个，减少请求次数
• entry入口告诉webpack从那个模块开始构建依赖图
• output告诉webpack输出到哪里，输出文件命名
• loader 处理webpack不能识别的文件，转化成webpack可以处理的内容
• plugins 执行范围更广的任务，
• mode 选用开发环境和生产环境

webpack的基本使用使用以上核心的功能，在其上面添加不同的功能，配置loader，配置plugins，来丰富webpack的功能