Webpack到底能干啥 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第13天
Webpack作用
Web Pack 顾名思义-Web包
Webpack其实就是一个打包程序-静态模块打包器
它会递归地构建一个依赖关系图 我们根据这个关系图来找依赖是非常方便的
核心概念

entry入口

指示Webpack作用方向(调用模块)
e.g:

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口output

有入口自然有出口
在我们前面的一系列操作后 最后生成bundle就得过它这一关(默认值为 ./dist)
我们通过指定输出路径来输出bundle
自然 我们需要指定一个output

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'webpack.bundle.js'
  }
};

loader

Webpack自己只能理解JS文件 别的东西就需要它-loader啦 可以将所有类型的文件转换为 webpack 能够处理的有的模块-然后正常打包即可
e.g.

const path = require('path');

const config = {
  output: {
    filename: 'xianbei.bundle.js'
  },
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

插件-plugins

loader负责加载-转换 而plugins则负责的更广泛 压缩 优化都得要它-插件是webpack 的支柱功能()
跟composer的安装插件类似 我们require即可

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); 

const config = {
  module: {
    rules: [
      { test: /.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

------------------至此 讲完概念部分------------------
我们继续延伸
创建个项目罢
**npm init -y**
npm初始化先
我们去安装环境
npm install webpack webpack-cli -D
随便写个.js
npx webpack --mode=development来构建即可
接下来 让我们逝逝处理CSS
配置文件先require css处理为style标签 css处理为link标签
(前提:Plugins:css-loade和style-loader)

var path = require('path');

module.exports = {
    // 入口
    entry: {
        app: './src/app.js'
    },

    // 输出
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                     {
                         loader: 'style-loader'  // 可以把css放在页面上
                     },
                     {
                         loader: 'css-loader'    // 放在后面的先被解析
                     }
                ]
            }
            
        ]
    }
};

我们再试试loader的功能

// user.js
export const user = '你是个先辈'

//main.js
import { user } from './user'

console.log(user)

// my loader
module.exports = function (content) {
  const handleContent = content.replace('先辈', 'HOMO')
  return handleContent
}

const path = require('path')

module.exports = {
  //...
  mode: 'development',
  entry: './main.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [path.resolve(__dirname, './loader.js')],
      },
    ],
  },
}

相信大家大概可以看懂 输出结果即为你是个HOMO
有错误请指出,Bye~