webpack

现代化前端最流行的一款 构建打包工具

前端构建打包工具的发展历史

  1. grunt
  2. gulp
  3. fis
  4. webpack
  5. ...

webpack 打包构建原理

基于某个入口文件,分析这个文件中的依赖。然后继续往下寻找依赖的依赖。循环往复,最后没有依赖了,把找到的全部都打包到一起。

webpack 核心

  1. entry (入口)
  2. output (出口)
  3. loaders (转换器) - webpack 将依赖都看成是一个一个的模块。但是默认情况只能识别 js与json 两种格式的模块。如果想要打包图片、样式等资源的话,就需要相应的loader转换器来进行转换操作,转换之后webpack才能识别。
  4. plugins (插件) - 有一些操作转换器也实现不了,这时就可以交给插件来实现。比如说要将某个文件直接复制到出口里面等操作。
  5. mode (打包模式 4.x 版本之后提供的) - 开发 | 生产

webpack 简单使用 (查看文档的指南部分)

  1. 创建 webpack-demo
  2. 初始化
  3. 安装 webpack webpack-cli

运行 webpack 命令来打包

一、全局安装了 webpack 之后,可以直接在项目下使用 webpack 命令即可。

二、项目的本地安装

  1. ./node_modules/.bin/webpack
  2. 使用 npx webpack
  3. npm 脚本方式

默认的入口文件是: src/index.js
默认的出口文件是: dist/main.js

如果你的入口文件或出口文件不是默认的文件的话。
可以通过 --entry 选项来告诉它使用哪个入口文件

     --output 选项来告诉它使用哪个出口文件

不推荐使用选项的方式来控制,推荐是用配置文件的方式:(webpack.config.js)

一、自动帮我们生成 dist / index.html

使用一款插件,html-webpack-plugin

  1. 安装插件
npm install --save-dev html-webpack-plugin
  1. 配置插件
plugins: [
  new HtmlWebpackPlugin({
    // 可以传递一个template选项,来控制使用哪个模板页面来生成
    template: path.resolve(__dirname, './public/index.html')
  })
]

二、将public文件夹里面的内容直接复制到dist文件夹中。

使用一款插件,copy-webpack-plugin

  1. 安装插件
npm install --save-dev copy-webpack-plugin
  1. 配置插件
plugins: [
  new CopyWebpackPlugin([
    {
      // 将 public 文件夹中的文件内容,全部拷贝至 出口文件夹中
      from: path.resolve(__dirname, './public')
    }
  ])
]

三、引入css样式

需要两个转换器:style-loader | css-loader
css-loader: 将css文件转换成 webpack 能够识别的模块文件
style-loader: 将css写入到html页面的style标签中

  1. 安装需要的转换器
npm install -D style-loader css-loader
  1. 配置转换器规则
  module: {
    // 转换器的配置,规则
    rules: [
      {
        test: /\.css$/,
        // 多个转换器使用时,需要按照倒序的写法
        use: ['style-loader', 'css-loader']
      }
    ]
  },

四、引入scss样式

除了 style-loader | css-loader 之外还需要 sass-loader | node-sass(这玩意安装可能会想死)

五、引入less样式

除了 style-loader | css-loader 之外还需要 less-loader | less

六、引入图片

使用 url-loader 的转换器

Last modification:December 18th, 2019 at 05:18 pm
如果觉得我的文章对你有用,请随意赞赏