webpack的深度理解

1、什么是webpack

模块化的打包工具
webpack默认可以处理js、json文件

2、什么是打包

将模块化语言如 .vue .ejs .sass 打包成浏览器能识别的css、js、jpg等

3、模块

entry：入口配置
ouput：出口
loader：解析模块、识别除了js、json的语言
plugin：插件

loader

 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。为此，首先安装相对应的 loader：

webpack配置文件

webpack.config.js:
let path = require('path')
let webpackMerge = require('webpack-merge')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,'dist')
    },
    rules: [
        { test: /\.css$/, use: 'css-loader' },
        { test: /\.ts$/, use: 'ts-loader' }
    ],
    mode:'development'
}

webpack的打包原理

把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按需加载。
找到“require”、“exports”、“define”等关键词，并替换成对应模块的引用