Webpack4快速上手【大前端必备知识】

Daisy__yangyang

已于 2022-03-22 16:13:06 修改

阅读量355

点赞数

分类专栏：自动化构建化工具文章标签： webpack

于 2020-12-11 16:08:40 首次发布

本文链接：https://blog.csdn.net/weixin_37883657/article/details/110817554

版权

本文是Webpack4的快速上手教程，涵盖了从初始化项目、配置文件、工作模式，到资源模块加载、加载器分类和核心工作原理的详细讲解。还介绍了插件机制、Webpack的功能，如自动编译、Dev Server、Source Map、模块热更新及不同环境的配置策略，帮助开发者全面理解并掌握Webpack4。

摘要由CSDN通过智能技术生成

一、Webpack4 快速上手

yarn init --yes
yarn add webpack webpack-cli --dev
yarn webpack --version 查看版本
yarn webpack 打包（可以在 package.json 中添加 "build":"webpack" 修改打包指令）

yarn build打包会有 dist文件夹

二、Webpack4 配置文件

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'output')
  }
}

三、Webpack4 工作模式

默认情况下，打包项目是 product 生产模式（压缩形式），里面包含优化，比如压缩
我们是用生产模式 yarn webpack --mode development（未压缩形式），还有 none 原始模式，具体的差异在官网可查看：Mode | webpack
也可以在 webpack.config.js 中配置 mode 模式

module.exports = {
    mode:'development',
    entry:'./src/index.js' //制定webpack 打包入口路径
    output: { //设置输出文件位置
        filename:'bundle.js', //输出文件名称
        path:path.join(__dirname, 'output') // //输出文件目录（必须是绝对路径）
    }
}

四、Webpack4 资源模块加载

yarn add css-loader --save
yarn add style-loader --dev
yarn add file-loader --dev
yarn add file-loader --dev //Webpack 文件资源加载器
yarn add url-loader -dev // Webpack URL 加载器
小文件使用 Data URLs，减少请求次数
大文件单独提取存放，用 file-loader ，提高加载速度
yarn add babel-loader @babel/core @babel/preset-env --dev //处理ES6新特性
yarn add html-loader --dev

const path = require('path')

module.exports = {
    mode:'none',
    entry:'./src/main.css' //制定webpack 打包入口路径
    output: { //设置输出文件位置
        filename:'bundle.js', //输出文件名称
        path:path.join(__dirname, 'output') // //输出文件目录（必须是绝对路径）
        pub licPath: 'dist/'
    },
    module: {
        rules : [
            {
                test:/.js$/,
                use:{ //超出 10KB 文件单独提取存放，小于 10KB 文件转换为 Data URLs嵌入代码中
                    loader:'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/.png$/,
                use:{ //超出 10KB 文件单独提取存放，小于 10KB 文件转换为 Data URLs嵌入代码中
                    loader:'url-loader',
                    options: {
                        limit: 10 * 1024 //10kb
                    }
                }
            },
             {
                test:/.html$/,
                use:[
                    loader:'html-loader',
                    options: {
                       attrs:['img:src', 'a:href']
                    }
                ]
            },
            
        ]
    }
}