Webpack打包

1、webpack打包使用步骤

1. 初始化项目 yarn init -y

2. 安装依赖webpack、webpack-cli

   yarn add -D webpack webpack-cli

   -D是为了安装在开发环境

3. 在项目中创建src目录，然后在src中编写代码

4. 执行yarn webpack来对代码进行打包，生成dist文件夹

2、webpack配置文件

webpack.config.js

// webpack默认只能打包js文件，打包其他文件需要引入插件

const path = require("path");

module.exports = {
  //mode设置打包的模式，production表示生产模式 developement开发模式
  mode: "production",
  /**
   * entry用来指定打包时的主文件入口
   * 默认是./src/index.js 一般不改，约定优于配置
   * entry打包多个文件时，可以用数组，打包成一个文件分在一起
   * 采用对象的形式，后面文件打包成前面属性值的文件
   * */
  // entry: "./hello/hello.js",
  // entry: ["./src/a.js", "./src/b.js"],
  // entry: {
  //   a: "./src/a.js",
  //   b: "./src/b.js",
  // },
  /**
   * output //配置代码打包后的地址
   * path://指定打包的目录，必须要是绝对路径
   * filename:// 打包后的文件名
   * filename: "[name]-[id]-[hash].js",
   * name就是一个变量，代替a b的名字，生成了a.js b.js
   * clean//是否自动清理打包目录
   */
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    clean: true,
  },

  /**
   * 以css为例：
   * 使用css-loader可以处理js中的样式
   * 安装npm install --save-dev css-loader 或 yarn add css-loader -D
   * 使用css-loader,只打包，效果不生效
   * style-loader 使用yarn add -D style-loader
   * style-loader让效果生效
   * use中顺序是 ["style-loader", "css-loader"]
   * 顺序写反就会报CssSyntaxError的错误
   */
  /**
   *   资源模块类型，直接通过指定type来处理
   * { test: /\.(png|jpe?g|svg|gif)$/, type: "asset/resource" }
   */
  module: {
    rules: [
      { test: /\.css$/i, use: ["style-loader", "css-loader"] },
      { test: /\.(png|jpe?g|svg|gif)$/, type: "asset/resource" },
    ],
  },
};

3、js中的一些新特性，而新特性在旧浏览器中兼容性并不好。

引入babel工具，把新的js语法转换为旧的js，以提高代码的兼容性。

babel国内网站

babel官方网站

babel使用步骤

1. 安装npm install babel-loader @babel/core @babel/preset-env --save-dev 或yarn add babel-loader @babel/core @babel/preset-env --dev
2. 配置babel

  module: {
    rules: [
      // js文件
      {
        test: /\.js$/,
        use: [
          {
            // 使用loader
            loader: "babel-loader",
            options: {
              // 使用的插件
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
    ],
  },

3. 在package.json中设置兼容列表

browserslist的github地址

"browserslist":[
    "defaults"
  ]

4、插件(plugin)

loader会对代码进行编译，plugin只是一个辅助工具

插件用来为webpack来扩展功能

1. html-webpack-plugin

• 插件在打包后自动生成了index.html
• 安装：yarn add -D html-webpack-plugin
• 在webpack.config.js中增加const HTMLPlugin = require("html-webpack-plugin");
• 并配置 plugins: [new HTMLPlugin({})],

5、webpack启动服务器

• 先安装webpack-dev-server yarn add -D webpack-dev-server
• 执行时yarn webpack serve或yarn webpack serve --open增加--open表示启动服务器后自动打开
• 配置 webpack –watch 执行，（在本地文件夹中访问）代码发生变化时自动更新打包。

直接在package.json中的配置

"scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "dev":"webpack server --open"
  },

6、配置devtool:

devtool:"inline-source-map"方便开发时对打包的代码进行断点调试

配置前：

配置后：