玩转webpack

Posted 2021-03-25 it-hao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了玩转webpack相关的知识，希望对你有一定的参考价值。

前言

（在过去）对我这种渣渣来说，在项目里面一旦配置好了webpack之后，就再也不想碰这玩意儿了，因为实在是太多的坑。。。使用一个插件可能要把config文件改个十几二十遍，还得不断地跑起来看是不是生效了，有时候突然生效了也不知道原因是啥-.-反正下次再配的时候又会不记得。。

笔者对webpack是又爱又恨啊（应该很多读者也有一样的想法吧hhhh）又不得不去使用它，所以在前端的学习路上一路与webpack斗智斗勇，因而有了这篇wbpack的学习笔记，以下是笔者在实践中还有参考了无数优秀的webpack相关文章写下的笔记，假如有不当之处请及时指出～谢谢????

webpack是？了解一下

webpack可以说是一个模块打包器，让你可以放心地写你的前端项目，放心地使用社区上最流行的库，模块，插件，框架等等。不用担心，webapck都会根据你的项目帮助你将其打包好，打包好的文件可以直接提供给浏览器使用噢。

四个核心

入口（entry）

我们要告诉webpack它应该从哪里开始构建我们的项目，所以我们要指定一个或多个js文件作为入口文件（parcel是可以以html和js作为入口文件），然后webpack就会从入口文件开始构建其内部依赖，形成一个依赖图。

出口（output）

webpack构建好后会生成称为bundles的文件中，所以我们需要告诉webpack出口文件放在哪个位置，如何命名等规则。

预处理器（loader）

因为webpack本身只认识javascript文件，loader可以帮我们把其他类型的文件转化为它能处理的模块，包括图片，字体，css，ES6，ts，vue模版等。不同的文件会有不同的loader去转化。当然你可以在每个loader按照粒度去配置你的逻辑，但是要注意书写顺序等小问题噢（也就是说会有很多各种各样的小坑等着你）

插件（plugins）

都说插件是webpack的支柱功能，它负责完成loader无法完成的其他事项。我们可以在插件里引入webpack自带的一些优化插件，例如CommonsChunkPlugin，DllPlugin等，还有一些需要我们自己install的插件（也属于webpack生态圈中的），例如ExtractTextWebpackPlugin，HtmlWebpackPlugin等（更多可以看看官网的介绍https://webpack.docschina.org/plugins ），还有就是一些webpack社区中一些优秀的插件例如happyPack，ImageminPlugin等。。。可能对一些刚刚入门的同学来说有点看不懂，不过没所谓，慢慢来，你以后都会用上的～

以下是一个简单的栗子

const path = require(‘path‘);
const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 
module.exports = {
  entry: {
    index: path.join(__dirname, ‘main.js‘),
  },
  output: {
    path: path.join(__dirname, ‘/dist‘),
    filename: ‘js/bundle.js‘
  },
  module: {
     rules: [
          { test: /.css$/, use: ‘css-loader‘ },
          { test: /.ts$/, use: ‘ts-loader‘ }
     ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: ‘index.html‘,
      template: ‘index.html‘,
    })
  ]
};