webpack入门

webpack入门

• webpack是一个进阶中高级前端的必经之路
• 作用 :
  • 代码转译
  • 模块合并
  • 混淆压缩
  • 代码分割
  • 自动刷新
  • 代码校验
  • 自动部署

安装 ;

• npm i webpack w}ebpack-cli -G 全局安装
• npm i webpack webpack-cli -D 项目安装
• npx webpack --config lovevivi.config.js 自定义webpack.config.js
• npm init生成webpack.json配置文件
• npx webpack 打包

 // webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode:"development"
}

module.exports里面的配置

• entry : 打包的入口文件
• output : 打包后
  • path : 运行webpack指令 把文件打包去到的文件夹 必须是绝对路径
  • filename : 打包后的文件的名字
• mode　　是否压缩 默认是production (如果不写mode 会报警告)
  • development 不压缩
  • production 压缩

// webpack.json
"scripts": {
    "bind": "npx webpack --config lovevivi.config.js"
  },
      
      // 在cmd  运行npm run bind 就会执行lovevivi.config.js 而不是webpack.config.js了

自动编译 :

• watch
  • 直接在webpack后面加–watch 不然npx webpack --watch
  • 或者直接在webpack.config里面 watch:true
• webpack-dev-server
  • 下载npm i webpack-dev-server
  • 作用 : 可以开启一个服务器 实现热更新 (注 热更新不在是dist文件了 而是运行在根目录)
  • 开启 ： npx webpack-dev-serve
  • 指令配置 ：
    • –open 自动打开
    • –port 5000 自定义端口
    • --contentBase ./src 自定义当前端口运行的文件
    • hot 热模块更替
    • compress 压缩

插件 html-webpack-plugin

• 作用 我们用webpack打包的js代码是在内存中 不在文件夹里面 而我们打包的js在dist中 这样会造成影响

• 安装npm i html-webpack-plugin -D

• 使用 :

  // webpack.config.js
  const HtmlWebacpckPlugin  = require('html-webpack-plugin');
  module.exports = {
      plugins:[
          new HtmlWebacpckPlugin({
              filename:"", // 生成的html文件名字
              template:"", // 需要转义的html文件路径
          })
      ]
  }
  

  • 导入 : const HtmlWebacpckPlugin = require('html-webpack-plugin');
  • filename 生成的html文件名字
  • template 需要转义的html文件路径

处理内部资源文件 :

处理css

• loader

  • 安装 : npm i css-loader style-loader -D 安装css-loader 和style-loader到项目

  • 在打包入口文件中导入需要用到的css (webpack会利用style-loader解析为style标签)

  • // webpack.config.js
    module:{
            rules:[
                {
                    /* 正则匹配文件 */
                    test: /\.css$/,
                    /* webpack加载动态资源是从右止左执行的
                        css-loader 是解析css
                        style-loader是吧解析后的css放到行内样式
                    */
                   use: ['style-loader', 'css-loader']
                }
            ]
        }
    

    • test 正则匹配文件
    • use 需要执行的解析方法 默认是从右到左
      • css-loader 解析css
      • style-loader 将解析后的css放到行内样式里面

处理less和scss

• 安装 ; npm i less less-loader sass-loader node-sass -D

• // webpack.config.js
  module:{
          rules:[
              {
                  /* 正则匹配文件 */
                  test: /\.css$/,
                  /* webpack加载动态资源是从右止左执行的
                      css-loader 是解析css
                      style-loader是吧解析后的css放到行内样式
                  */
                 use: ['style-loader', 'css-loader']
              },
              {
                  test:/\.less$/,
                  use:['style-loader','css-loader','less-loader']
              },
              {
                  test:/\.s(a|c)ss$/,
                  use:['style-loader','css-loader','scss-loader']
              }
          ]
      }
  

处理图片和字体图标 :

• 利用 file-loader或者url-loader

• // webpack.config.js
  /* {
                  test:/\.(jpg|jpeg|png|bmp|gif)$/,
                  use:'file-loader'
              } */
              {
                  test:/\.(jpg|jpeg|png|bmp|gif)$/,
                  use:{
                      loader:'url-loader',
                      options:{
                          limit:30 * 1024,
                          outputPath:'images',
                          name:'[name]-[hash:4].[ext]'
                      }
                  }
              }
  

  • file-loader 下载 npm install file-loader -D
    • test 配置 需要转换的文件 — 正则
    • use 使用file-loader
  • url-loader 下载 npm install file-loader url-loader -D
    • 区别 url-loader更加灵活,可以添加更多属性 比较图片小于多少就转成base64
    • loader : 需要用到的loader
    • options : 配置们
      • limit 小于多少就转base64
      • outputPath 文件打包后的指定文件夹 (在dist后面)
      • name 文件打包后的指定文件名 不能写死 不然多个图片的吧 后面会把前面覆盖
        • 变量 name 当前文件名的名字
        • 变量 hash 随机数 hash: 保留多少位随机数
        • 变量 ext 当前文件名后缀

处理js 利用babel

• 在js中 因为版本不断在更新es5 es6 es7 .... 有些高级语法 浏览器不支持 就的要用到babel来转换

• 下载 npm i babel-loader @babel/core @babel/preset-env webpack -D

  			// webpack.config.js
  			{
                  test : /\.js$/,
                  use:{
                      loader:'babel-loader',
                      options:{
                          presets:['@babel/env']
                      }
                  }
              }
  

  • presets 需要用到的babel语法
  • plugins 需要用到babel的其他语法转换 数组形式 详细请看babel的官网

source map的使用 :

作用 : 可以定位到日志的行数

devtool	构建速度	重新构建速度	生产环境	品质(quality)
(none)	+++	+++	yes	打包后的代码
eval	+++	+++	no	生成后的代码
cheap-eval-source-map	+	++	no	转换过的代码（仅限行）
cheap-module-eval-source-map 推荐使用	o	++	no	原始源代码（仅限行）
eval-source-map	–	+	no	原始源代码
cheap-source-map	+	o	no	转换过的代码（仅限行）
cheap-module-source-map	o	-	no	原始源代码（仅限行）
inline-cheap-source-map	+	o	no	转换过的代码（仅限行）
inline-cheap-module-source-map	o	-	no	原始源代码（仅限行）
source-map	–	–	yes	原始源代码
inline-source-map	–	–	no	原始源代码
hidden-source-map	–	–	yes	原始源代码
nosources-source-map	–	–	yes	无源代码内容

插件 :

• clean-webpack-plugin

  • 作用 每次打包删掉dist

  • 安装 npm i clean-webpack-plugin -D

  • // webpack.config.js
    const cleanWebpackPlugin = require('clean-webpack-plugin')
    plugins[
    	new cleanWebpackPlugin()
    ]
    

• copy-webpack-plugin

  • 作用 : 在根目录webpack不会打包 用copy-webpack-plugin插件解决

  • 安装 npm i copy-webpack-plugin

  • 使用

  • // webpack.config.js
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    
        plugins[
    	new CopyWebpackPlugin([
          {
            from: path.join(__dirname, 'assets'),
            to: 'assets'
          }
        ])
    ]
    

  • from 那个文件

  • to 打包去哪里

BannerPlugin

这是一个webpack的内置插件，用于给打包的JS文件加上版权注释信息

1. 引入webpack

   const webpack = require('webpack')
   

2. 创建插件对象

   plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html'
       }),
       new CleanWebpackPlugin(),
       new CopyWebpackPlugin([
         {
           from: path.join(__dirname, 'assets'),
           to: 'assets'
         }
       ]),
       new webpack.BannerPlugin('啦啦啦!')
     ],
   

copy-webpack-plugin

1. 安装插件

   npm i copy-webpack-plugin -D

2. 引入插件

   const CopyWebpackPlugin = require('copy-webpack-plugin')
   

3. 使用插件, 在plugins中插件对象并配置源和目标

   from: 源, 从哪里拷贝, 可以是相对路径或绝对路径, 推荐绝对路径

   to: 目标, 拷贝到哪里去, 相对于output的路径, 同样可以相对路径或绝对路径, 但更推荐相对路径(直接算相对dist目录即可)

   plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html'
       }),
       new CleanWebpackPlugin(),
       new copyWebpackPlugin({
               patterns:[
                   {
                       from:path.join(__dirname,'assets'),
                       to:'assets'
                   }
               ]
           })
     ],
   

webpack高级

HTML中img标签的图片资源处理

1-安装npm install -S html-loader

2-配置:

// webpack.config.js
// loader里面配置
{
       test: /\.html$/i,
       loader: 'html-loader',
}

多页面打包 :

• 01- 改入口文件 entry

  • 以前单页面的入口文件 entry : ‘./src/main.js’
  • 现在是多页面所以要改成对象 entry:{main:"./src/main.js",study:’./src/study.js’}

• 02 - 改出口文件 output

  • 以前单页面的出口文件 output:{filename:‘main.js’}
  • 多页面不可能只生成一个js 所以要用变量 output:{filename:’[name].js’}

• 03 - 如果用了html-webpack-plugin这个插件 也要改这个插件

  • 以前 : new htmlWebpackPlugin({ilename: ‘index.html’,emplate: ‘./src/index.html’}),
  • 现在 : 有一个页面就new几个htmlWebpackPlugin对象
  • 注意点 : 如果只是有几个写一个htmlWebpackPlugin函数的话 那么每个html的会导入所以的js所以我们要用chunks来配置 吧需要用到的js写进去

• 案列

  • // 单页面
    entry: main:'./src/main.js'
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'main.js'
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: 'index.html',
                template: './src/index.html',
            }),
        ],
    
    // 多页面
    entry: {
            main:'./src/main.js',
            study:'./src/study.js'
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: '[name].js'
        },
        plugins: [
            new htmlWebpackPlugin({
                filename: 'index.html',
                template: './src/index.html',
                chunks:['main']
            }),
            new htmlWebpackPlugin({
                filename: 'study.html',
                template: './src/study.html',
                chunks:['study']
            }),
        ],
    

第三方库的两种引入方式

• 可以通过expose-loader进行全局变量的注入，同时也可以使用内置插件webpack.ProvidePlugin对每个模块的闭包空间，注入一个变量，自动加载模块，而不必到处 import 或 require

• 安装 : npm i -D expose-loader

• 作用 : webpack导入的第三方库其实默认是在闭包里面 , 而我们每次使用的需要去import或者require一下 不能在全局访问 所以就很麻烦 如下代码 :

• const $ = require('jquery')
  $('body').css({backgroundColor:'pink'})
  console.log($);
  console.log(window.$);
  
  /*
  		我们下载了jquery模板(npm i jquery) 然后导入就可以使用jquery的语法  众所周知 : jquery其实就是封装了js的一个函数   我们之间打印$就可以打印出这个函数
  		但是我们打印window.$确是undefined   所以我在每个js使用jquery的要先导入就很麻烦  所以就要用到expose-loader这loader吧局部变量注入到window中
  */ 
  

• // webpack.config.js
  {
                  test: require.resolve('jquery'), // 找到jquery的绝对路径
                  use: {
                    loader: 'expose-loader',// 使用的loader
                    options: { 
                      exposes:'$' // 需要挂载的变量
                    }
                  }
                }
  
  // js
  $('body').css({backgroundColor:'pink'})
  console.log($);
  console.log(window.$);
  // 经过配置之后  吧$挂载到window下面
  
  

第二种方法 : ProvidePlugin

• 利用webpack的属性ProvidePlugin来挂载到全局

• 代码如下

• // webpack.config.js
  const webpack = require('webpack')
  
  new webpack.ProvidePlugin({
      $:'jquery', // 键和值  
      jQuery:'jquery'
  })
  

题外话 : 关于require和import的区别

• require 是common.js的规范 用于nodejs不能运行在浏览器

  • 暴露 module.exports = XXX
  • 导入 const bar = require('./bar')

• import 是es6的导入语法 可以用于浏览器

  • 暴露 export default bar
  • 导入 import bar from ‘./bar’
  • exclude 黑名单 不需要打包的文件
  • include 白名单 需要打包的文件