Webpack 打包工具

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

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

• grunt
• gulp
• fis
• webpack
• .......

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

2. 配置插件

plugins: [
  new HtmlWebpackPlugin({
    // 可以传递一个template选项，来控制使用哪个模板页面来生成
    template: path.resolve(__dirname, './public/index.html')
  })
]

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

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

1. 安装插件

npm install --save-dev copy-webpack-plugin

2. 配置插件

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

2. 配置转换器规则

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 的转换器