webpack

安装

安装之前进行项目初始化生成 package.json 文件

npm init -y 
npm init 

接下来安装 webpack 和 webpack-cli

npm i webpack webpack-cli --save

配置命令行

在package.json文件的scripts字段中配置启动命令

"scripts":{
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production",
}

创建入口文件

webpack 默认的入口文件是 src 目录下的 index.js;
需要在项目的根目录下创建src文件夹，在里边创建 index.js 文件作为入口文件

执行命令

命令执行成功后。会自动在项目的根目录下生成一个dist 文件，该文件就是打包后的产物； dist 文件不是必须的，可以随时删除的

1. 开发环境

   npm run dev

2. 生产环境

   npm run build

webpack 支持的模块化

webpack 支持 CommonJs 模块化 和 es6的模块化

1. CommonJs

   // 模块导出
   module.exports = {}
   // 模块导入
   const res = requrie('模块url')

2. es6

   // 模块导出
   export default 模块名
   export 模块对象

   // 模块导入
   import ... from '模块url'

webpack的配置文件

如果要对webpack 进行配置，需要在项目根目录下创建配置文件 webpack.config.js； 该文件是一个模块

        module.exports = {
            ...
        }

webpack的入口和出口

webpack的入口 entry 和 出口 output ：

1. 单一入口和出口

   // 单一入口和出口
   const path = require('path')
   module.exports = {

   entry:'index.js',
   output:{
       //  设值出口文件存放的目录
       path:path.resolve(__dirname, "dist"),
       //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
       filename:'[name].js'
   }

   }

2. 多入口文件和单一出口

   // 多入口文件和单一出口
   const path = require('path')
   module.exports = {

   entry:['index.js', 'main.js',...],
   output:{
       //  设值出口文件存放的目录
       path:path.resolve(__dirname, "dist"),
       //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
       filename:'[name].js'
   }

   }

3. 多入口配置

   const path = require('path')
   module.exports = {

   entry:{
       index:'index.js',
       main:'main.js'
   }
   output:{
       //  设值出口文件存放的目录
       path:path.resolve(__dirname, "dist"),
       //  配置输出文件名 也可以使用自动映射 [name], name 对应的是entry中的key
       filename:'[name].js'
   }

   }

webpack的loader 和 plugin

webpack 处理 模板文件

webpack 处理html 文件： 需要借助于 html-webpack-plugin 插件， 该插件会自动帮我们管理引入js文件

1. 安装插件

   npm i html-webpack-plugin --save

2. 配置插件

   //  1 引入插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js'
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           })
       ]
   }
   
   

管理输出文件夹dist

需要管理输出的文件dist， 可以通过配置项或者是插件实现自动管理dist文件夹

1. 配置项

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js',
           //  管理dist文件夹
           clean:true
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           })
       ]
   }
   
   

2. 通过插件

   需要安装 `clean-webpack-plugin` 插件
   

   npm i clean-webpack-plugin --save

   
   
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const  { CleabWebpackPlugin } = require('clean-webpack-plugin')
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js',
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           }),
           new CleabWebpackPlugin()
       ]
   }
   
   

webpack 处理 css 文件

webpack 处理css / sass 文件，需要依赖loader； 需要安装 css-loader 和 style-loader , sass-loader 和 sass

loader 的作用：

1. css-loader : 处理解析css文件
2. style-loader ： 把处理解析后的css文件 从js文件中提取出来，以内部样式的方式（style标签）插入到html页面中，
3. sass ：解析处理 sass文件
4. sass-loader : 编译转码为css文件

• • *
• • *

生成内部的css样式

1. 安装loader

   npm i css-loader style-loader sass-loader sass --save

2. 配置loader

   //  1 引入插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js'
       },
       module:{
           //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
           rules:[
               // 每个对象都是一个loader的配置项
               {
                   test:/\.css$/i,
                   use:['style-loader', 'css-loader']
               },
               {
                   test:/\.(scss|sass)$/i,
                   use:['style-loader', 'css-loader', 'sass-loader']
               }
           ]
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           })
       ]
   }
   
   

打包生成独立的css文件

打包生成独立的css文件，需要借助于 mini-css-extract-plugin 插件，

1. 安装

   npm install --save-dev mini-css-extract-plugin

2. 配置插件

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js'
       },
       module:{
           //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
           rules:[
               // 每个对象都是一个loader的配置项
               {
                   test:/\.css$/i,
                   // 使用插件内部的loader 生成单独的css文件
                   use:[MiniCssExtractPlugin.loader 'css-loader']
               },
               {
                   test:/\.(scss|sass)$/i,
                   use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
               }
           ]
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           }),
           new MiniCssExtractPlugin()
       ]
   }
   
   

webpack处理图片资源

webpack 处理图片资源，需要使用 file-loader 和 url-loader

1. 安装

   npm i file-loader url-loader --save

2. 配置loader

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js'
       },
       module:{
           //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
           rules:[
               // 每个对象都是一个loader的配置项
               {
                   test:/\.css$/i,
                   // 使用插件内部的loader 生成单独的css文件
                   use:[MiniCssExtractPlugin.loader 'css-loader']
               },
               {
                   test:/\.(scss|sass)/i,
                   use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
               },
               //  配置处理图片的loader
               {
                   test:/\.(jpg|jpeg|png|gif|webp)$/i,
                   use:[
                       {
                           loader:'url-loader',
                           options:{
                               //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
                               limit:8192,
                               // name 属性配置输入的图片名和路径
                               name:'image/[name].[ext]'
                           }
                       }
                   ]
               }
           ]
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           }),
           new MiniCssExtractPlugin()
       ]
   }
   
   

webpack的热更新

webpack的 webpack-dev-server 插件可以实现热更新并开启服务

1. 安装

   npm i webpack-dev-server --save

2. 配置 devServer

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js'
       },
       devServer:{
           // 开启服务的端口号
           port:9001
       },
       module:{
           //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
           rules:[
               // 每个对象都是一个loader的配置项
               {
                   test:/\.css$/i,
                   // 使用插件内部的loader 生成单独的css文件
                   use:[MiniCssExtractPlugin.loader 'css-loader']
               },
               {
                   test:/\.(scss|sass)/i,
                   use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
               },
               //  配置处理图片的loader
               {
                   test:/\.(jpg|jpeg|png|gif|webp)$/i,
                   use:[
                       {
                           loader:'url-loader',
                           options:{
                               //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
                               limit:8192,
                               // name 属性配置输入的图片名和路径
                               name:'image/[name].[ext]'
                           }
                       }
                   ]
               }
           ]
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           }),
           new MiniCssExtractPlugin()
       ]
   }
   
   

3. 配置启动命令

   在 package.json 文件中配置启动命令 , 执行命令 `npm run server`
   

   "scripts":{

   "test": "echo \"Error: no test specified\" && exit 1",
   "dev":"webpack --mode development",
   "build":"webpack --mode production",
   "server":"webpack serve --open"

   }

webpack的环境配置

环境分为开发环境，生产环境， 测试环境等， 因此需要配置环境

需要借助于插件 webpack-merge 帮我们合并处理配置文件：

    npm i webpack-merge --save

创建三个webpack的配置文件： webpack.basic.js webpack.dev.js webpack.pro.js

• webpack.basic.js

• webpack.dev.js

  const { merge } = require('webpack-merge');
  const basic = require('webpack.basic.js');
  module.exports = merge(basic, {...})

• webpack.pro.js

  const { merge } = require('webpack-merge');
  const basic = require('webpack.basic.js');
  module.exports = merge(basic, {...})

webpack

安装

安装之前进行项目初始化生成 package.json 文件

npm init -y 
npm init 

接下来安装 webpack 和 webpack-cli

npm i webpack webpack-cli --save

配置命令行

在package.json文件的scripts字段中配置启动命令

"scripts":{
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development",
    "build":"webpack --mode production",
}

创建入口文件

webpack 默认的入口文件是 src 目录下的 index.js;
需要在项目的根目录下创建src文件夹，在里边创建 index.js 文件作为入口文件

执行命令

命令执行成功后。会自动在项目的根目录下生成一个dist 文件，该文件就是打包后的产物； dist 文件不是必须的，可以随时删除的

1. 开发环境

   npm run dev

2. 生产环境

   npm run build

webpack 支持的模块化

webpack 支持 CommonJs 模块化 和 es6的模块化

1. CommonJs

   // 模块导出
   module.exports = {}
   // 模块导入
   const res = requrie('模块url')

2. es6

   // 模块导出
   export default 模块名
   export 模块对象

   // 模块导入
   import ... from '模块url'

webpack的配置文件

如果要对webpack 进行配置，需要在项目根目录下创建配置文件 webpack.config.js； 该文件是一个模块

module.exports = {
    ...
}

webpack的入口和出口

webpack的入口 entry 和 出口 output ：

1. 单一入口和出口

   // 单一入口和出口
   const path = require('path')
   module.exports = {

   entry:'index.js',
   output:{
       //  设值出口文件存放的目录
       path:path.resolve(__dirname, "dist"),
       //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
       filename:'[name].js'
   }

   }

2. 多入口文件和单一出口

   // 多入口文件和单一出口
   const path = require('path')
   module.exports = {

   entry:['index.js', 'main.js',...],
   output:{
       //  设值出口文件存放的目录
       path:path.resolve(__dirname, "dist"),
       //  配置输出文件名 可以指定文件名，也可以使用自动映射 [name]
       filename:'[name].js'
   }

   }

3. 多入口配置

   const path = require('path')
   module.exports = {

   entry:{
       index:'index.js',
       main:'main.js'
   }
   output:{
       //  设值出口文件存放的目录
       path:path.resolve(__dirname, "dist"),
       //  配置输出文件名 也可以使用自动映射 [name], name 对应的是entry中的key
       filename:'[name].js'
   }

   }

webpack的loader 和 plugin

webpack 处理 模板文件

webpack 处理html 文件： 需要借助于 html-webpack-plugin 插件， 该插件会自动帮我们管理引入js文件

1. 安装插件

   npm i html-webpack-plugin --save

2. 配置插件

   // 1 引入插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {

   entry:'index.js',
   output:{
       path:path.resolve(__dirname, 'dist'),
       filename:'index.js'
   },
   plugins:[
       new HtmlWebpackPlugin({
           //  定义模板
           template:'index.html',
           //  输入文件名
           filename:'index.html'    
       })
   ]

   }

管理输出文件夹dist

需要管理输出的文件dist， 可以通过配置项或者是插件实现自动管理dist文件夹

1. 配置项

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {

   entry:'index.js',
   output:{
       path:path.resolve(__dirname, 'dist'),
       filename:'index.js',
       //  管理dist文件夹
       clean:true
   },
   plugins:[
       new HtmlWebpackPlugin({
           //  定义模板
           template:'index.html',
           //  输入文件名
           filename:'index.html'    
       })
   ]

   }

2. 通过插件
   需要安装 clean-webpack-plugin 插件

   npm i clean-webpack-plugin --save

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const { CleabWebpackPlugin } = require('clean-webpack-plugin')
   module.exports = {

   entry:'index.js',
   output:{
       path:path.resolve(__dirname, 'dist'),
       filename:'index.js',
   },
   plugins:[
       new HtmlWebpackPlugin({
           //  定义模板
           template:'index.html',
           //  输入文件名
           filename:'index.html'    
       }),
       new CleabWebpackPlugin()
   ]

   }

webpack 处理 css 文件

webpack 处理css / sass 文件，需要依赖loader； 需要安装 css-loader 和 style-loader , sass-loader 和 sass

loader 的作用：

1. css-loader : 处理解析css文件
2. style-loader ： 把处理解析后的css文件 从js文件中提取出来，以内部样式的方式（style标签）插入到html页面中，
3. sass ：解析处理 sass文件
4. sass-loader : 编译转码为css文件

———————————————————————————————————————————————————————————————————

生成内部的css样式

1. 安装loader

   npm i css-loader style-loader sass-loader sass --save

2. 配置loader

   // 1 引入插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {

   entry:'index.js',
   output:{
       path:path.resolve(__dirname, 'dist'),
       filename:'index.js'
   },
   module:{
       //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
       rules:[
           // 每个对象都是一个loader的配置项
           {
               test:/\.css$/i,
               use:['style-loader', 'css-loader']
           },
           {
               test:/\.(scss|sass)$/i,
               use:['style-loader', 'css-loader', 'sass-loader']
           }
       ]
   },
   plugins:[
       new HtmlWebpackPlugin({
           //  定义模板
           template:'index.html',
           //  输入文件名
           filename:'index.html'    
       })
   ]

   }

打包生成独立的css文件

打包生成独立的css文件，需要借助于 mini-css-extract-plugin 插件，

1. 安装

   npm install --save-dev mini-css-extract-plugin

2. 配置插件

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {

   entry:'index.js',
   output:{
       path:path.resolve(__dirname, 'dist'),
       filename:'index.js'
   },
   module:{
       //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
       rules:[
           // 每个对象都是一个loader的配置项
           {
               test:/\.css$/i,
               // 使用插件内部的loader 生成单独的css文件
               use:[MiniCssExtractPlugin.loader 'css-loader']
           },
           {
               test:/\.(scss|sass)$/i,
               use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
           }
       ]
   },
   plugins:[
       new HtmlWebpackPlugin({
           //  定义模板
           template:'index.html',
           //  输入文件名
           filename:'index.html'    
       }),
       new MiniCssExtractPlugin()
   ]

   }

webpack处理图片资源

webpack 处理图片资源，需要使用 file-loader 和 url-loader

1. 安装

   npm i file-loader url-loader --save

2. 配置loader

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {

   entry:'index.js',
   output:{
       path:path.resolve(__dirname, 'dist'),
       filename:'index.js'
   },
   module:{
       //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
       rules:[
           // 每个对象都是一个loader的配置项
           {
               test:/\.css$/i,
               // 使用插件内部的loader 生成单独的css文件
               use:[MiniCssExtractPlugin.loader 'css-loader']
           },
           {
               test:/\.(scss|sass)/i,
               use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
           },
           //  配置处理图片的loader
           {
               test:/\.(jpg|jpeg|png|gif|webp)$/i,
               use:[
                   {
                       loader:'url-loader',
                       options:{
                           //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
                           limit:8192,
                           // name 属性配置输入的图片名和路径
                           name:'image/[name].[ext]'
                       }
                   }
               ]
           }
       ]
   },
   plugins:[
       new HtmlWebpackPlugin({
           //  定义模板
           template:'index.html',
           //  输入文件名
           filename:'index.html'    
       }),
       new MiniCssExtractPlugin()
   ]

   }

webpack的热更新

webpack的 webpack-dev-server 插件可以实现热更新并开启服务

1. 安装

   npm i webpack-dev-server --save

2. 配置 devServer

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {
       entry:'index.js',
       output:{
           path:path.resolve(__dirname, 'dist'),
           filename:'index.js'
       },
       devServer:{
           // 开启服务的端口号
           port:9001
       },
       module:{
           //  配置规则。规则有两个必须的属性：test （检测匹配要处理的文件） 和 use （对检测到的目标文件使用相应的loader进行处理）
           rules:[
               // 每个对象都是一个loader的配置项
               {
                   test:/\.css$/i,
                   // 使用插件内部的loader 生成单独的css文件
                   use:[MiniCssExtractPlugin.loader 'css-loader']
               },
               {
                   test:/\.(scss|sass)/i,
                   use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
               },
               //  配置处理图片的loader
               {
                   test:/\.(jpg|jpeg|png|gif|webp)$/i,
                   use:[
                       {
                           loader:'url-loader',
                           options:{
                               //  limit 限定图片的大小， 如果小于指定的值，则转换为base64的编码格式
                               limit:8192,
                               // name 属性配置输入的图片名和路径
                               name:'image/[name].[ext]'
                           }
                       }
                   ]
               }
           ]
       },
       plugins:[
           new HtmlWebpackPlugin({
               //  定义模板
               template:'index.html',
               //  输入文件名
               filename:'index.html'    
           }),
           new MiniCssExtractPlugin()
       ]
   }
   
   

3. 配置启动命令

   在 package.json 文件中配置启动命令 , 执行命令 `npm run server`
   

   "scripts":{

   "test": "echo \"Error: no test specified\" && exit 1",
   "dev":"webpack --mode development",
   "build":"webpack --mode production",
   "server":"webpack serve --open"

   }

webpack的环境配置

环境分为开发环境，生产环境， 测试环境等， 因此需要配置环境

需要借助于插件 webpack-merge 帮我们合并处理配置文件：

    npm i webpack-merge --save

创建三个webpack的配置文件： webpack.basic.js webpack.dev.js webpack.pro.js

• webpack.basic.js

• webpack.dev.js

  const { merge } = require('webpack-merge');
  const basic = require('webpack.basic.js');
  module.exports = merge(basic, {...})

• webpack.pro.js

  const { merge } = require('webpack-merge');
  const basic = require('webpack.basic.js');
  module.exports = merge(basic, {...})