webpack基本使用

webpack是什么

webpack是一种前端资源构建工具，一个静态资源打包器
前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理，根据模块的依赖关系进行静态分析，打包成对应的静态资源（bundle）。

webpack五个核心概念

• Entry
  入口指示webpack以哪个文件为入口起点打包，分析构建内部依赖图
• Output
  输出指示webpack打包资源bundles输出到哪里，以及如何命名
• Loader
  Loader让webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）
• Plugins
  插件可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等
• Mode
  模式指示webpack使用相应模式的配置
  1.development：能让代码在本地调试运行环境
  2.production：让代码优化上线运行环境

使用webpack

1.npm init 初始化建package.json文件
2.安装 npm i webpack webpack-cli -g
npm i webpack webpack-cli -D开发
3.建src文件夹 （里面创建index.js文件：入口文件）、建build文件夹（打包后存放的）

• 运行指令
  ** 开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
  webpack会以./src/index.js 为入口文件开始打包，打包后输出到./build/built.js 整体打包环境是开发环境
  ** 生产环境
  webpack ./src/index.js -o ./build/built.js --mode=production
• 结论
  ** webpack能处理js/json资源，不能处理css/img等其他资源
  ** 生产环境和开发环境将es6模块化编译成浏览器能识别的模块化
  ** 生产环境比开发环境多了一个压缩js代码

webpack打包样式资源

要是用loader来处理，需要新建文件webpack.config.js（webpack配置文件：作用指示webpack干哪些活<当运行webpack指令时，会加载里面的配置>）
所有的构建工具都是基于node.js平台运行的，模块化默认采用common.js

• loader 1.下载包 2.再去使用配置loader

//resolve用来拼接绝对路径方法,nodejs语法
const {resolve}=require('path');
//webpack.config.js里面暴露写法
module.export={
   //webpack配置
   entry:'./src/index.js',//入口起点
   //输出
   output:{
   //输出文件名
   filename:'built.js',
   //输出路径
   //_dirname 是nodejs的变量，代表当前文件目录的绝对路径
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
       //详细loader配置
       //不同资源配置不同loader
       {
         //匹配哪些文件
         test:/\.css$/,
         //使用哪些loader处理
         use:[
           //use数组中执行顺序：从右往左，从下往上，依次执行
           //创建style标签，将js中的样式资源插入进行，添加到head中生效
           'style-loader',//（是一个包）
           //将css文件变成commonjs模块加载到js，里面内容样式是字符串
           'css-loader',//（是一个包）
         ]
       },
       {
         test:/\.less$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
           //将less文件编译成css文件,需要下载less-loader和less
           'less-loader'
         ]
       },
     ]
   }，
   //plugin的配置
   plugins:[
     //详细的pligins的配置
   ],
   //模式
   mode:'development'
}

打包HTML资源

piugins：1.下载 2.引入 3.使用

const {resolve}=require('path');
//插件引入
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
       //详细loader配置
     ]
   }，
   //plugin的配置
   plugins:[
     //详细的pligins的配置
     //下载html-webpack-plugin包
     //功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（js、css）
     //需求：需要有结构的HTML文件
     new HtmlWebpackPlugin({
       //复制  .src/index.html文件,并自动引入打包输出的所有资源（js、css）
       template:'./src/index.html'
     })
   ],
   //模式
   mode:'development'
}

打包图片资源

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
       //详细loader配置 
       {
         test:/\.less$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
           'less-loader'
         ]
       },
       {
       //问题：处理不了html中的img图片
         //处理图片资源
         test:/\.(jpg|png|gif)$/,
         //使用一个loader
         //需要下载两个loader url-loader和file-loader后者依赖于前者
         loader:'url-loader'
         options:[
           //图片大小小于8kb，就会被base64处理
           //优点：减少请求数量（减轻服务器压力）
           //缺点：图片体积更大（文件请求速度更慢）
           limit:8*1024
           //问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
           //解析是会出现问题[object Module]
           //解决：关闭url-loader的es6模块化，使用commonjs解析
           esModule:false
         ]
       },
        {
        //
         test:/\.html$/,
         //处理html文件的img图片(负责引入img，从而能被url-loader进行处理)
         loader:'html-loader“”
         //给图片进行重命名
        //[hash:10]取图片的hash值前10位
        //[hash:10]取文件的原来扩展名
         name:'[hash:10].[ext]'
       },
     ]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'
     })
   ],
   //模式
   mode:'development'
}

打包其他资源

//假设引入icon
const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
       //详细loader配置 
       {
         test:/\.css$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
         ]
       },
       {
       //打包其他资源（除了html/js/css资源以外的资源）
         exclude:/\.(css|js|html)$/,
         loader:'file-loader',
         //修改名字
         options:{
         name:'[hash:10],[ext]'
       },
     ]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'
     })
   ],
   //模式
   mode:'development'
}

devServer

如果要新增代码，就需要再重新打包一次
devServer：自动的打包，自动化（自动编译、自动打开浏览器、自动刷新浏览器）

const {resolve}=require('path');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
     ]
   }，
   //plugin的配置
   plugins:[
   ],
   //模式
   mode:'development'
     //开发服务器
     //特点只会在内存中编译打包，不会有任何输出
     //启动DevServer指令为：npx webpack-dev-server（本地）
     //当运行的指令是webpack会编译打包输出内容出去，当运行的是npx只会在内存中编译打包
     devServer:{
     //项目构建后的路径
      contentBase:resolve(_dirname,'build'),
      //启动gzip压缩
      compress:true,
      //端口号
      port:300,
      //自动打开浏览器
      open:true
  }
}

实例 -开发环境配置

能让代码运行即可
web.config.js

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
        module：{
     rules：[
       //详细loader配置 
       { 
         //处理css资源
         test:/\.css$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
         ]
       },
       { 
         //处理less资源
         test:/\.less$/,
         use:[
           'style-loader',//（是一个包）
           'css-loader',//（是一个包）
           'less-loader'
         ]
       },
       {
         //处理图片资源
         test:/\.(jpg|png|gif)$/,
         loader:'url-loader'
         options:[
           limit:8*1024
           name:'[hash:10].[ext]',
           //关闭es6模块化
           esModule:false,
           outputPath:'imgs'//改变输出路径
         ]
       },
        {
         test:/\.html$/,
         //处理html文件的img图片
         loader:'html-loader'
         name:'[hash:10].[ext]'
       },
       {
       //打包其他资源
         exclude:/\.(css|js|html|less|jpg|png|gif)$/,
         loader:'file-loader',
         //修改名字
         options:{
         name:'[hash:10],[ext]'
       },
     ]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'
     })
   ],
   //模式
   mode:'development'
     devServer:{
     //项目构建后的路径
      contentBase:resolve(_dirname,'build'),
      //启动gzip压缩
      compress:true,
      //端口号
      port:3000,
      //自动打开浏览器
      open:true
  }
}

运行：1.npx webpack-dev-server 只会在内存中，没有输出内容
2.webpack 会将打包结果输出出去

webpack构建环境介绍–生产环境

开发环境：源——webpack+自动化——bundle
生产环境：优化1.css-js(将css转换的js从js中提取出来)
2.代码压缩 3.兼容性问题（css3）
优化效果：* 变更了 * 更加平稳的运行

提取css成单独文件+css兼容性+压缩css

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//下载mini-css-extract-plugin包，可以提取css成单独文件
const 	MiniCssExtractPlugin=require('mini-css-extract-plugin');
//压缩css的插件
const 	OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
//设置nodejs环境变量
process.env.NODE_ENV='development';
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
       //详细loader配置 
       {
         test:/\.css$/,
         use:[
           //创建style标签，将样式放入
           //'style-loader',//（是一个包）
           //1.作用取代style-loader，提取js中css成单独文件
           MiniCssExtractPlugin.loader,
           //将css文件整合到js
           'css-loader',
           //2.兼容性处理：postcss-->postcss-loader   加插件postcss-preset-env（先下载包）
           //插件找到package.json中browserslist里面配置，通过配置加载指定的css兼容性样式
           //不能使用默认，需要修改配置
           {
             loader:'postcss-loader',
             //修改配置
             potions:{
               ident:'postcss',
               plugins:()=>[
                 //postcss插件
                 require('postcss-preset-env')()
               ]
             }
           }
         ]
       },
     ]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'
     }),
     new MiniCssExtractPlugin({
       //若想输入到css目录下/重命名
       filename:'css/built.css'
     }),
     //压缩css：会运行更快
     new OptimizeCssAssetsWebpackPlugin(),
   ],
   //模式
   mode:'development'
}

package.json文件中
"browserslist":{
  "development":[
  //开发环境：设置node环境变量：process.env.NODE_ENV='development'
    "last 1 chrome version",//兼容最近的Chrome版本
    "last 1 firefox version",
    "last 1 safari version",
  ],
  "production":[
  //生产环境：默认看生产环境
  ">0.2%",//大于99.8%浏览器
  "not dead",//已经死了的ie10
  "not op_mini all"//早就死亡的
  ]
}

js语法检查+兼容性处理

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
     //1.语法检查：看看有没有错误 eslint-loader 依赖于eslint
     //注意：只检查自己写的源代码，第三方的库不用检查
     //设置规则在package.json中eslintConfig中设置  airbnb/JavaScript-->为了使用他下载3个库eslint-config-airbnb-banse、eslint-plugin-import、eslint
     
      {
        test:/.js$/,
        exclude:/node_modules/,
        loader:'eslint-loader',
        options:{
          //自动修复eslint错误
          fix:true 
        }
      },
      //2.js兼容性处理：babel-loader @babel/core  @babel/preset-env
     // 1.基本兼容性处理 --> @babel/preset-env(只能转换基本语法，如promi
     se之类不能转换)
    //  2.全部js兼容性处理 --> @babel/polyfill
    //只需要在index.js页面引入 import '@babel/polyfill'
    //问题我只要解决部分兼容性问题，但是全部引入了，体积太大
    //3.需要做兼容性的做：按需加载 --> corejs（推荐）
       {
        test:/.js$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        options:{
          //预设：指示babel做怎么样的兼容性处理
          presets:[
            '@babel/preset-env',
            {
              //按需加载
              useBuiltIns:'usage',
              //指定corejs版本
              corejs:{
                version:3            
              },
              //兼容性做到哪个版本浏览器
              targets:{
                chrome:'60',
                firefox:'60',
                ie:'9',
                safari:'10',
                edge:'17'
              }
          ] 
        }
      }
     ]
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'
     }),
   ],
   //模式
   mode:'development'
}

package.json文件中
"eslintConfig":{
  "extends":"aribnb-base"
}

js和html的压缩

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[],
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'，
       //压缩html代码，里面压缩配置
       minify:{
         //折叠空格
         collapseWhitespace:true,
         //移除注释
         removeComments:true
       }
     }),
   ],
   //模式   生产环境下自动压缩js代码
   mode:'production'
}

实例 --生产环境配置

//当一个文件被多个loader处理，一定要指定loader的先后执行顺序js中（先执行eslint 再执行babel）
const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const 	MiniCssExtractPlugin=require('mini-css-extract-plugin');
const 	OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
//复用loader
const commonCssLoader=[
  MiniCssExtractPlugin.loader,
  'css-loader',
  {//兼容性，在package.json中定义browserslist
    loader:'postcss-loader',
    //修改配置
    potions:{
    ident:'postcss',
    plugins:()=>[
      //postcss插件
      require('postcss-preset-env')()
    ] 
    }
  }
];
module.export={
   entry:'./src/index.js',
   output:{
   filename:'built.js',
   path:resolve(_dirname,'build')
   }，
   module：{
     rules：[
       {
         test:/\.css$/,
         use:[commonCssLoader]
        },
        {
          test:/\.less$/,
          use:[...commonCssLoader, 'less-loader']
         },
         {
            test:/.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            //优先执行的意思
            enforce:'pre'
            options:{
              //自动修复eslint错误
            fix:true 
         }
         {//在package.json中eslintConfig  ---> airbnb
            test:/.js$/,
            exclude:/node_modules/,
            loader:'eslint-loader',
            options:{
              presets:[
                [
                  '@babel/preset-env',
                  {
                      useBuiltIns:'usage',
                     //指定corejs版本
                      corejs:{
                        version:3            
                      },
                     //兼容性做到哪个版本浏览器
                      targets:{
                        chrome:'60',
                        firefox:'60',
                        ie:'9',
                        safari:'10',
                        edge:'17'
                     }
                  }
                ]
              ]
            }
           },
           {
             test:/\.(jpg|png|gif)$/,
             loader:'url-loader',
             options:{
               limit:8*1024,
               name:'[hash:10].[text]',
               outputath:'imgs',
               esModule:false
             }
           },//html里面的img
           {
             test:/\.html$/,
             loader:'html-loader'
           },
           {
              //打包其他资源
             exclude:/\.(css|js|html|less|jpg|png|gif)/,
             loader:'file-loader',
             options:{
               outputPath:'media',
               name:'[hash:10],[ext]'
             }
            },
           
   }，
   //plugin的配置
   plugins:[
     new HtmlWebpackPlugin({
       template:'./src/index.html'，
       //压缩html代码，里面压缩配置
       minify:{
         //折叠空格
         collapseWhitespace:true,
         //移除注释
         removeComments:true
       }
     }),
     new MiniCssExtractPlugin({
       //若想输入到css目录下/重命名
       filename:'css/built.css'
     }),
     //压缩css：会运行更快
     new OptimizeCssAssetsWebpackPlugin(),
   ],
   //模式   生产环境下自动压缩js代码
   mode:'production'
}

优化配置

• 开发环境
  1.优化打包运行速度（html）
  2.优化代码调试（sourcename）

• 生产环境
  1.优化打包运行速度
  2.优化代码运行性能