webpack

在网页中会引用哪些常见的静态资源？

• JS
  • .js .jsx .coffee .ts（TypeScript 类 C# 语言）
• CSS
  • .css .less .sass .scss
• Images
  • .jpg .png .gif .bmp .svg
• 字体文件（Fonts）
  • .svg .ttf .eot .woff .woff2
• 模板文件
  • .ejs .jade .vue

网页中引入的静态资源多了以后有什么问题

1. 网页加载速度慢， 因为 我们要发起很多的二次请求；
2. 要处理错综复杂的依赖关系

如何解决上述两个问题

1. 合并、压缩、精灵图、图片的Base64编码
2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系

webpack概念

webpack 是一个用于 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

1. 文件引入依赖进行分类构成依赖图
2. 不同模块分别编译成代码块(chunk)
3. 将各类代码块打包 合并
4. 生成并输出静态资源(bundle.js)

webpack核心概念

webpack基础配置

/* 
   webpack.config.js webpack的配置文件
   告诉webpack要干什么（运行webpack指令时、会加载里面的配置）
*/

// 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件 默认值是 ./src/index.js
    entry: './src/index.js',

    // 输出路径 默认值是 ./dist/main.js
    output: {
        // 输出文件名
        filename: 'built.js', // 'js/built.js'

        // 输出路径 [ __dirname: node.js的变量、代表当前文件目录绝对路径 ]
        path: resolve(__dirname, 'build')
    },

    // loader的配置
    // 下载 -> 使用
    module: {
        rules: [
            // 详细的loader配置
            // test 配置哪些文件 ；use 使用哪些loader，多个用 [,,] 执行顺序从右到左

            // 1. css-loader ： 将css文件编译成commonjs模块加载到js中
            // 2. style-loader ： 创建style标签，将js中的样式资源插入进去，添加到head中生效
            {
                test: /\.css$/, use: ['style-loader', 'css-loader']
            }
        ]
    },

    // plugins的配置
    // 下载 -> 引入 -> 使用
    plugins: [
        // 详细的plugins配置 
        // 默认再输出文件夹内创建一个 index.html 文件，自动打包输出的所有资源（js/css）
        // new HtmlWebpackPlugin(),

        // 需要有dom结构的html
        new HtmlWebpackPlugin({
            // 将./src/index.html 的内容复制一遍 再引入打包的资源 再输出文件夹内输出
            template: './src/index.html'
        }),
    ],

    // mode模式配置
    mode: 'development', // mode:'production'

    // devServer-开发服务器 自动编译
    // 启动制令 npx webpack-dev-server 仅在内存中编译打包 不会输出
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true, // 压缩
        port: 8080,
        open: true, // 自动打开浏览器
    }

}