webpack静态模块打包工具

1 . 什么是webpack

      webpack是一个静态模块打包工具

2 webpack使用前的准备

node环境的软件

用npm或者yarn模块管理器

3 webpack的基本使用

 

打包完成后会在当前文件夹下生成一个dist文件夹 ，极致压缩

4 配置修改

 

5 打包流程图

 

 6 webpack 插件 Plugins

1）HtmlWebpackPlugin

安装

npm install --save-dev html-webpack-plugin

 

其他插件请参考webpack官网 EvalSourceMapDevToolPlugin | webpack 中文文档

7 webpack -- 加载器 -- Loaders

Webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。

在 require() 语句中使用 loadername! 作为前缀的方式来使用 loader，或者在 webpack 配置中配置 regex 来自动应用它们 - 请参阅 配置 。

 

等等更多请参考webpack官网

配置

比如css 

module.exports = {
  module: {
   rules: [ // 规则
      { // 具体规则对象
        test: /\.css$/i, // 匹配.css结尾的文件(忽略大小写)
        use: ["style-loader", "css-loader"],
        // css-loader 把import css当做js引入(把css代码打包进js中)
        // style-loader 把css代码插入到DOM中 (把js里的css代码, 解析插入到网页dom上)
      },
  },
};

 less

module.exports = {
  module: {
   rules: [ // 规则
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"]
        // 顺序不能乱: loader是从右往左使用的
        // less-loader: 把less文件转css文件和代码
        // css-loader: 把css代码打包进js中
        // style-loader: 把css代码 -> 插入 -> DOM中
      },
  },
};

处理图片和字体以及高级js语法做处理

module.exports = {
  module: {
   rules: [ // 规则
      {   {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
        type: 'asset' // 在导出一个 data URI(base64字符串) 和一个单独的文件之间自动选择
        // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
        // 好处: 减少http请求次数

        // 大于8kb的, 直接复制文件到dist目录下
        // 为何不转base64: 因为转base64会体积增30%
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/, // 匹配以.eot/.svg/.ttf/.woff/.woff2结尾文件
        type: 'asset/resource',  // 当做静态资源直接"复制"文件
        generator: {
          filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
          // [name] 占位符-还使用源文件的名字
          // [hash:6] 随机产生6位的hash值-防止跟别的文件重名
          // [ext] 占位符-使用源文件的扩展名 (.ttf / .woff)
        }
      },
      {
        test: /\.js$/, // 匹配js结尾文件
        exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
        // 下载了jq3.x版本, 在node_modules(而且这个文件特别大, 你要转换起来, 很慢, 容易出错)
        use: { 
            loader: 'babel-loader', // 使用加载器-处理
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
    ]
  },
};

8 webpack -- 开发服务器

下载webpack-dev-server, 启动一个开发服务器, 用于快速开发应用程序

 步骤 ： 

1. 构建入口和所有模块依赖关系图

2. 磁盘读取对应的文件到内存, 才能加载

3. 用对应的 loader 进行处理和翻译

4. 将处理完的内容, 输出到内存里而非磁盘上

5. 以后代码变化, 自动更新打包变化的代码, 显示到浏览器上

 下载包

yarn add webpack-dev-server@3.11.2 -D 

 配置自定义serve

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

 运行命令

npm run serve

或者yarn serve

9 webpack -- 开发服务器 --端口配置

webpack.config.js中添加服务器配置  

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}

10 项目打包上线

写代码实在线下开发环境中 英文"development"  

线上实在生产环境中部署  英文"production"