Webpack 基础打包

努力进化的程序猿
115 阅读6分钟

Webpack 基础打包

认识 Webpack

官方解释：

Webpack 是一个静态的模块化打包工具，为现代的 JavaScript 应用程序；

  • 打包 (bundler) ：webpack 可以帮助我们进行打包，所以它是一个打包工具；
  • 静态的 (static)：我们最终可以将代码打包成最终的静态资源(部署到静态服务器) ；
  • 模块化 (module)：webpack 默认支持各种模块化开发, ES Module、CommonJS、AMD等；
  • 现代的 (modern)：因为现代前端开发面临各种各样的问题，才催生了 webpack 的出现和发展；

Vue 项目的加载文件

  • JavaScript 的打包：

    • 将 ES6 转换成 ES5 的语法；
    • TypeScript 的处理，将其转换为 JavaScript；

  • Css 的处理：

    • CSS文件模块的加载、提取；
    • Less、Sass 等预处理器的处理；

  • 资源文件 img、font：

    • 图片 img 文件的加载；
    • 字体 font 文件的加载；

  • HTML 资源的处理：

    • 打包 HTML 资源文件；
  • 处理 Vue 项目的 SFC 文件 .vue 文件；

Webpack 的默认打包

  • 可以通过 Webpack进行打包，之后运行打包之后的代码；

    • 在目录下直接执行 Webpack 命令

  • 生成一个 dist 文件夹，里面存放一个 main.js 的问价，就是打包之后的文件：

    • 这个文件中的代码是被压缩的；
    • 代码中依然存在 ES6 语法，比如箭头函数、const 等，这是因为在默认情况下 Webpack 并不清楚我们打包后的文件是否需要转成 ES5 之前的语法，需要通过 babel 来进行转换和设置；

  • Webpack 确定入口：

    • 当我们运行 Webpack 时，它会自动查找当前目录下的 src/index.js 作为入口；
    • 如果当前项目中没有 src/index.js 文件将会报错；

  • 可以通过配置来指定入口和出口

    npx webpack --entry .src/main.js --output-path ./bulid

创建局部的 Webpack

  • 第一步：创建 package.json 文件，用于管理项目的信息，库依赖等；

    执行指令： npm init

  • 第二步：安装局部的 Webpack；

    执行指令： npm install webpack webpack-cli -D

  • 第三步：使用局部的 Webpack；

    执行指令： npx webpack

  • 第四步：在 package.json 中创建 scripts 脚本，执行脚本打包即可；

    'scripts': {
    'bulid': 'webpack'
}

    执行指令： npm run bulid

Webpack 的配置文件

  • 在通常情况下，webpack 需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不行的；
  • 可以在根目录下创建一个 web.config.js 文件，作为 webpack 的配置文件：
const path = require('path');
​
// 导出配置信息
module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    }
}

指定配置文件

  • 如果配置文件并不是 webpack.config.js 来命名

    可以通过--config 来指定对应的配置文件；

    web --config wk.config.js

  • 但每次都会执行命令来对源码进行编译，所以我们在 package.json 中增加一个新的脚本：
{
    Debug
    'scripts': {
        'bulid': 'webpack --config wk.config.js'
    },
    'devDependencies': {
        'webpack': '^5.14.0',
        'webpack-cli': '^4.3.1'
    }
}

css-loader 的使用

什么是 loader：

  • loader 可以用于对模板的源代码进行转换；
  • 可以将 css 文件也看成是一个模块，通过 import 来加载这个模块；
  • 加载这个模块时，webpack 并不知道如何对其进行加载，必须制定对应的 loader 来完成这个功能；

需要什么样的loader

  • 对于加载 css 文件来说，需要一个可以读取 css 文件的 loader；
  • 这个 loader 最常用的是 css-loader；

css-loader 的安装：

npm install css-loader -D

loader 配置方式

  • 配置方式表示的意思是在 webpack.config.js 文件写明配置信息：

    • module.rules 中允许我们配置多个 loader；
    • 这种方式可以更好的表示 loader 的配置，也方便后期的维护；

  • module.rules 的配置如下：

    • rules 属性对应的值是一个数组：[Rule];

    • 驻足中存放的是一个个 Rule，Rule 是一个对象，对象中可以设置多个属性：

      • test 属性：用于对资源进行匹配，通常会设置为正则表达式；

      • use 属性：对应的值是一个数组：[UseEntry]

        UseEntry 是一个对象，可通过对象的属性来设置一些其他属性；

        • loader： 必须有一个 loader 属性，对应的值是一个字符串；

        • options：可选的属性，值是一个字符串或者对象，值会被传入到 loader 中；

          传递字符串(如：use：['style-loader']) 是 loader 属性的简写方式(如：use[{loader: 'style-loader'}]);

loader 属性：Rule.use:[{loader}]的简写。

认识 style-loader

  • 我们可以通过 css-loader 来加载 css 文件；

    但 css 在我们的代码中并没有生(页面没有效果)。

  • 原因如下：

    • css-loader 只是负责将 .css 文件进行解析，并不会将解析之后的 css 插入到页面中；
    • 若我们希望再完成插入 style 操作，需要 style-loader；

  • 安装 style-loader：

    npm install style-loader -D;

配置 style-loader

  • 使用 style-loader：

    • 在配置文件中，添加 style-loader；
    • 注意： 因为 loader 的执行顺序是从右向左(从下到上或从后向前)。所以需要将 style-loader 写到 css-loader 的前面；
use:[
    {loader: 'style-loader'},
    {loader: 'css-loader'}
]
  • 重新执行编译 npm run bulid,可以发现打包后的 css 已经生效；

处理 less 文件

  • 在开发中，我们可能会用到 less、sass、stylus 的预处理器来编写 css 样式，效率会更高。

  • 让我们的环境支持这些预处理器；

    首先需要确定 less、sass 等编写的 css 需要通过工具转换成普通的 css；

  • less 样式：

    @fontSize: 30px;
@fontWeight: 700;
​
.content {
    font-size: @fontSize;
    font-weight: @fontWeight;
}

less 工具处理

  • 可以使用 less 工具来完成它的编译转换：

    npm install less -D

  • 执行如下命令：

    npx lessc ./src/css/title.less title.css

less-loader 处理

  • 在项目中我们会编写大量的 css，可以通过下面方式使其自动转换：

    使用 less-loader:

    npm install less-loader -D

  • 配置 webpack.config.js
{
    test: /.less$/,
    use: [
        {loader: 'style-loader'},
        {loader: 'css-loader'},
        {loader: 'less-loader'}
    ]
}

执行 npm run bulid 之后 less 就可以自动转换成 css，并且页面也会生效了。

认识 PostCSS 工具

  • 什么是 Postcss？

    • PostCSS 是一个通过 JavaScript 来转换样式的工具；
    • 可以帮助我们进行一些 CSS 的转换和适配，比如自动添加浏览器前缀、css 样式的重置；
    • 为实现这些功能，需要借助于 PostCSS 对应的插件；

  • 使用 PostCSS 的步骤：

    1. 查找 PostCSS 在构建工具中的拓展，如 webpack 中的 postcss-loader；
    2. 选择可以添加需要的 PostCSS 相关的插件；

命令行使用 PostCSS

  • 直接在终端使用 PostCSS

    • 需要单独安装一个工具 postcss-cli；

  • 安装方式：postcss、postcss-cli

    npm install postcss postcss-cli -D

  • 需要编写一个需要添加前缀的 css：

插件 autoprefixer

  • 我们需要添加前缀，所以要安装 autoprefixer：

    npm install autoprefixer -D

  • 直接使用 PostCSS 工具，并制定使用 autoprefixer；

npx postcss --use autoprefixer -o end.css ./src/css/style.css

postcss-loader

  • 真实开发中我们必然不会直接使用命令行工具来对 css 进行处理，而是借助构建工具：

    • 在 webpack 中使用 postcss 就是使用 postcss-loader 来处理的；

  • 安装 postcss-loader：

    npm install postcss-loader -D

  • 因为 postcss 需要有对应的插件才会起作用，所以需要配置它的 plugin；
{
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            plugins: [
                require('autoprefixer')
            ]
        }
    }
}

单独的 postcss 配置文件

我们可以讲这些配置信息放到一个单独的文件中进行管理：

  • 在根目录下创建 postcss.config.js

    module.exports = {
    plugins: [
        require('autoprefixer')
    ],
}

postcss-preset-env

  • 事实上，在配置 postcss-loader 时，我们配置插件并不需要使用 autoprefixer。

  • 可以使用另一个插件：postcss-preset-env

    • postcss-preset-env 也是一个 postcss 的插件；
    • 它可以帮助我们将一些现代的 CSS 特性，转成大多数浏览器认识的 CSS，并且会根据目标浏览器或者运行时环境添加所需的 polyfill；
    • 也包括会自动帮助我们添加 autoprefixer；

  • 安装方式：

    npm install postcss-preset-env -D

avatar
文章
阅读
粉丝