包您学会webpack

前言

webpack:前端静态模块化打包机。说的更加通俗易懂点就是把 js文件打包,比如我相信很多人会遇到别人给你发的代码,你还要去下载不同的插件、不同的编译器等等，非常的麻烦不是吗。
webpack 完美解决了这些问题

一、安装、配置文件

1. 安装
   打开cmd窗口输入 :

   npm i webpack webpack-cli -D
   

   剩下的就剩等待了
2. 配置文件
   当您创建并安装完项目以后打开在项目中创建一个 dist文件 、src文件 、webpack.config.js文件,我们的配置就要在webpack.config.js文件中操作,如下图:
   

二、详细配置

1. 入口

entry : 入口起点,指示webpack应该使用那些模块,简单来说就是你要将哪些内容打包。默认值是 . / src/index.js 当然,也可以通过以下方式进行指定:

module.exports = {
  entry: './path/to/my/entry/file.js',     //此处路径就是你想要打包文件的路径
};

2.输出

output : 这个属性可以告诉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'),  // 出口文件的路径:  注意 "__dirname"  就是当前文件的意思
    filename: 'my-first-webpack.bundle.js',//这个配置项为设置包 名  所有打包的js文件将都会被放在这里
  },
};

3.模式

mode : 模式 , 可以选择development(开发模式) , 与production (产品模式).
写法:

module.exports = {
  mode: 'development',   //或者用产品模式(production)
};      //还有一个是none  不使用任何默认优化选项,基本不用  要不是今天又看了遍文档我都没注意

开发和产品的区别我相信能看懂这一章节的就不用我多说了吧!! 如果不懂您也可以理解为开发模式体积大,
产品模式体积小

4、加载器

loader : 用于对模块的源代码进行转换,也就是说这里是配置webpack 支持打包那些文件,废话不多说,瞧代码:

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },//是的,你没看错,test配置项后是正则,我也是用到什么搜什么
      { test: /\.ts$/, use: 'ts-loader' }, //use配置项就是你要说明那些类型文件时可以打包的
    ],
  },
};

当然,css-loader与ts-loader只是其中的冰山一角,并不是全部,我在这儿只是打个比方

5.插件

只要和计算机相关的都有插件,不要怀疑,webpack当然也用啦!!
在这里我只举例说一个:

npm i html-webpack-plugin -D   

将打包好的html模板加载到dist目录并插入打包好的js文件,用法;

const HtmlWebpackPlugin = require("html-webpack-plugin")

  plugins:[
        new HtmlWebpackPlugin({"template":"./public/index.html"})
    ],   //注意呦,  这里是妞一个,哈哈哈

是不是灰常灰常的方便嘞!!!用过的人都说好

结束

今天先到这儿吧,后面的东西我明天再发,保证您弄懂webpack