webpack五个属性的详细使用方法

webpack 笔记

1.环境参数

• node.js 10 版本以上
• webpack4.x 版本以上

2.webpack 简介（构建工具）

• webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
• 在 webpack 看来，前端所有的资源文件（js/json/css/img/less）都会作为模块处理
• 根据模块的依赖关系进行静态分析，打包生成对应的静态资源

3.webpack 的五个概念

3.1Entry

• 入口指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图

3.2Output

• 输出指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名

3.3Loader

• Loader 让 webpack 能够处理那些非 javascript 文件（webpack 自身只理解 javascript）

3.4Plugins

• 插件（Plugins）可以用于执行范围更广的任务，插件的范围包括：从打包优化和压缩，一直到重新定义环境中的变量等。

3.5Mode

• mode 指示 webpack 使用相应的模式配置

4.webpack 初体验

4.1 安装 webpack

• npm init
• npm install --save-dev webpack
• npm install --save-dev webpack-cli 表示将 webpack 安装到 package.json 依赖中
• 注意：
  • 建议安装到项目当中
  • 4.以上版本需要安装 webpack-cli

4.2 使用 webpack

• 在项目根目录下创建 webpack.config.js
• webpack.config.js 文件为配置项文件
• 填充配置项之后在根目录下运行 webpack 命令，即 webpack 构建完成

const path = require("path"); //node.js中的系统模块，用来解析地址
module.exports = {
  entry: "./src/main.js", //该配置项为入口文件
  output: {
    //该配置项为出口文件，path和filename参数为必须的
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js", //打包之后的文件名
  },
};
复制代码

4.2.1entry 的使用

// 该写法被称为单入口文件
entry: "./src/main.js"
// 多文件入口,生成一个文件
entry: ['./src/1.js','./src/2.js']
//多文件入口,生成多个文件
entry: {
        one: './src/1.js',
        two: './src/2.js'
       }
复制代码

4.2.2output 的使用

• 该配置项为出口文件，path 和 filename 参数为必须的

// 一对一  多对一
 output:{
    path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
 }
 //多对多
 output:{
    path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
        // 生成的文件名称就为entry对象里的key eg:one.bundle.js
 }
output:{
    path: path.resolve(__dirname, 'dist'),
        filename: '[id].bundle.js'
        // 生成的文件名称就为entry对象里的key eg:0.bundle.js
 }
 output:{
    path: path.resolve(__dirname, 'dist'),
        filename: '[hash].bundle.js'
        // 每一次打包都会生成一个唯一的 hash
 }
复制代码

4.2.3plugin 的使用

常用的插件

• html-webpack-plugin(生成 html 文件)

  • 安装命令：npm i html-webpack-plugin -D
  • 使用方法：

  //weboack.config.js文件
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  // 配置plugin参数
  module.exports = {
    entry: {
      //多文件入口,生成多个文件
      one: "./src/1.js",
      two: "./src/2.js",
    },
    //该配置项为出口文件，path和filename参数为必须的
    output: {
      path: path.resolve(__dirname, "dist"),
      //filename: 'bundle.js', //一对一  多对一
      filename: "[name].bundle.js", //多对多,[name]或者[id]都可以
    },
    // 插件
    plugins: [
      new HtmlWebpackPlugin({
        title: "王佳慧", //html文件中title的配置项
        template: "./src/template.html", //按照改模板配置
        filename: "test1.html", //更改输出的文件名
        //值为head会把js文件放在head标签里，值可以为true/body的时候，会把js放在body的结束标签之前
        inject: "head",
        hash: true, //该项为true时，会在js文件后面加上一个hash值
        chunks: ["one"], //想加载哪个js文件，就把哪个js文件的key，写入该数组
        minify: {
          //是否对生成的页面压缩
          collapseWhitespace: true, //压缩空格
          removeAttributeQuotes: true, //压缩引号
          removeComments: true, //压缩的时候去掉注释
        },
      }),
      //生成两个文件，分别引入
      new HtmlWebpackPlugin({
        title: "王可爱",
        template: "./src/template.html",
        filename: "test2.html",
        inject: "head",
        hash: true,
        chunks: ["two"],
        minify: {
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeComments: true,
        },
      }),
    ],
  };
  
  //手动配置 template.html 文件--title 配置项内容
  `<title><%=htmlWebpackPlugin.options.title%></title>`;
  //在项目目录下运行 webpack 命令
  复制代码

• clean-webpack-plugin(删除文件)

  • 安装命令：npm install --save-dev clean-webpack-plugin
  • 使用方法：

  //webpack.config.js文件
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   plugins: [
        // 删除文件--写在最上面表示，每次生成前，先把前一次的删除
        // 写一个参数表示删除的文件夹路径
        new CleanWebpackPlugin(['./dist'])
    ],
  复制代码

4.2.4devServer（配置服务器）

安装

npm install webpack-dev-server -D npm install webpack-dev-server -g

配置

• contentBase 服务器要访问的目录
• host 服务器的 ip 地址
• port 端口
• open 自动打开页面
• hot 热启动

使用

// 引入webpack模块
const webpack = require("webpack");
module.exports = {
  entry: {
    //多文件入口,生成多个文件
    one: "./src/1.js",
    two: "./src/2.js",
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      title: "王佳慧",
      template: "./src/template.html",
      filename: "index.html",
      inject: "head",
      hash: true,
      chunks: ["one"],
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
    }),
    // 引入热更新插件
    new webpack.HotModuleReplacementPlugin(),
  ],
  // devServer配置项
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 9000,
    open: true, //自动打开浏览器
    hot:true
  },
  // 模式
  mode: "development",
};

// 使用webpack-dev-server启动
复制代码

4.2.5Mode（模式）

在4.0版本mode模式被简化，在3.x版本时候，还需要安装插件等，来实现功能，开启source map的调试模式也需要插件支持

1.开发环境（development）

• development打包后，一些没有依赖的方法、变量、文件会保留；而 production 则会移除。
• source map下会多一个可以编辑调试的选项文件，可供开发者调试（eg：打断点）

2.生产环境（production）

• 代码会进行压缩，比 development 的文件小。
• source map不可调试文件

3.不开启任何优化选项（none）

4.其他写法（也可以不在配置文件中配置webpack.config.js）

• 直接在命令中配置
  • webpack --mode production
  • webpack --mode development
• 在package.json文件中配置

"scripts": {
    "build": "webpack --mode production",
    "dev":"webpack-dev-server --mode development"
  },
复制代码

注：不足之处，还请多多指教，欢迎交流