webpack从入门到进阶

前言

在我们平时的开发中，会经常使用到webpack，但很多时候我们都不做任何配置(webpack4)也可以进行开发，但是默认的配置真的够我们使用了吗？所以本文将带你开启webpack的大门。

前置知识篇

学习webpack前先让我们一起学习下必要的辅助概念

路径知识

在此之前我们有必要了解下webpack中会使用到的NodeJS路径知识:NodeJS路径知识

核心概念之 Entry

Entry 用来指定 webpack 的打包⼊口

Entry 的⽤法

单⼊⼝：entry 是⼀个字符串

module.exports = {
    entry: './src/index.js'
};
复制代码

多⼊⼝：entry 是⼀个对象

module.exports = {
    entry: {
        index: './src/index.js',
        manager: './src/manager.js'
    }
};
复制代码

核⼼概念之 Output

Output ⽤来告诉 webpack 如何将编译后的⽂件输出到磁盘的指定路径

Output 的⽤法：单⼊⼝配置

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js’,
        path: __dirname + '/dist'
    }
};
复制代码

Output 的⽤法：多⼊⼝配置

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
};
复制代码

通过[name]占位符确保⽂件名称的唯⼀

核⼼概念之 Loader

本身是一个函数，接受源文件作为参数，返回转换的结果。

常⻅的 Loader 有哪些？

babel-loader, 将es6+语法转换为es3/es5语法
css-loader,
style-loader,
scss-loader, 
less-loader,
postcss-loader,
file-loader, 进行图片字体等资源的打包
ts-loader, 将ts转换为js
raw-loader 将文件以字符串形式导入
...
复制代码

Loader 的⽤法

const path = require('path');
module.exports = {
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { test: /\.js$/, use: 'babel-loader' }
        ]
    }
};
复制代码

test 指定匹配规则

use 指定使⽤的 loader 名称

核⼼概念之 Plugins

插件⽤于 bundle ⽂件的优化，资源管理和环境变量注⼊ 作⽤于整个构建过程

常见的Plugins

CleanWebpackPlugin 清理构建目录
MiniCssExtractPlugin 将css从bundle文件里提取为一个独立的css文件
htmlWebpackPlugin 创建html去承载输出的bundle文件
UglifyWebpackPlgin 压缩js 去除console等指定语句
...
复制代码

Plugins 的⽤法

const path = require('path');
module.exports = {
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({template:'./src/index.html'})
    ]
};
复制代码

所有的插件都应放到plugins数组里

实战篇

在此之前我们先安装下必须依赖:

npm install webpack webpack-cli -D
复制代码

转换 ES6 为 ES5语法

安装所需依赖 npm i @babel/core @babel/preset-env babel-loader -D

配置如下:

babel的配置⽂件是：.babelrc[项目根目录下新建]

module: {
    rules: [
        {
            test: /\.js$/,
            use: 'babel-loader'
        },
    ]
};
复制代码

增加ES6的babel preset配置

babel的配置⽂件是：.babelrc[项目根目录下新建]

{
    "presets": [
        "@babel/preset-env" //可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。
    ]
}
复制代码

解析 React JSX

安装所需依赖

npm i @babel/preset-react -D

配置如下:

babel的配置⽂件是：.babelrc[项目根目录下新建]

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": []
}
复制代码

资源解析：解析 CSS

npm install style-loader css-loader less-loader -D
复制代码

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
        ]
},
复制代码

css-loader ⽤于加载 .css ⽂件，并且转换成 commonjs 对象

style-loader 将样式通过