这是我参与「第四届青训营」笔记创作活动的第8天

前言

学习webpack可以帮助我们更好的理解前端工程化的概念，并且学习好webpack在某种程度上来讲可以提高自己的竞争力，并且也是前端进阶的必经之路！

一、什么是webpack

概念：webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具

为什么需要打包呢？

因为我们平常在编写的js代码，都会采用一些新特性来进行编写，因为这样可以提高我们的开发效率，但是呢，这些新特性在低版本的浏览器又不支持，我们就需要将这些新特性的语法转换为低版本所支持的语法，所以就需要webpack来帮助我们进行代码的降级，并且为了减少代码体积，删除无用的代码等，这点也需要webpack来帮助我们完成此操作

二、使用 webpack

webpack 本身就是属于一个打包工具，而使用它，最主要的是需要编写它的一些配置项，以及安装一些配置项所依赖的插件等

2.1 使用 webpack

安装

# -D 开发环境依赖 因为webpack只是开发环境当中所使用的一个打包工具
npm i webpack webpack-cli -D

配置webpack

// webpack.config.js
module.exports = {
    entry: 'main.js',
    output: {
        filename: " [name].js",
        path: path.join( __dirname, "./dist" )
    }，
    module: {
        rules : [{
            test: /.less$/i,
            use: ['style-loader' , 'css-loader' , 'less-loader']
        }]
    }
}

上述配置就是一个最基本的配置

entry：指定打包入口文件
output：指定产物输出目录，如果目录不存在，会自动创建
module：用于配置解析各种资源文件，会将一些非js的文件，比如css转换为js标准语法等，配置项rules就是配置各种解析的loader

下面我们来看一下webpack打包的核心流程图

2.2 webpack 配置划分

关于Webpack的使用方法,基本都围绕“配置”展开，而这些配置大致可划分为两类:

中流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项

2.3 loader的使用

学过webpack的人都知道，webpack默认只支持对js文件的打包，如果打包一些非js文件就会报错，那么我们怎么去打包非js文件呢？

答：那就需要使用 loader 来完成，我们可以配置各种 loader，比如 css-loader，less-loader，ts-loader等，这些loader只有一个作用，那就是将非js文件转换为标准化的js文件

下面我们就来看看 css-loader 的具体演练 安装 css-loader

    npm i css-loader style-loader -D

只需要在配置文件当中它的 module 配置项中增加如下配置，就可完成css打包，其他资源也是类似如此

style-loader 是将打包之后的css自动添加到html引入当中。

loader的执行顺序是从右向左执行

rules : [{
    test: /.less$/i,
    use: ['style-loader' , 'css-loader']
}]

2.4 babel的使用

安装 babel

npm i babel-loader @babel/core @babel/preset-env -D

使用babel

module: { 
    rules: [{ 
        test: /\.js$/, 
        use: 'babel-loader', 
        options: { 
            presets: [ '@babel/preset-env' ] 
        } 
    }]
}

babel 的主要作用就是可以将一些 js 的高级语法进行降级，这样我们所写的 js 代码兼容性会更好

以上就是 webpack 的一些简单使用，webpack本身就是一个很复杂的一个工具，想学好webpack也需要花费一个较长的时间来学习，所以，最后的最后，我们还得好好学习呀 ~

初始Webpack | 青训营笔记

前言