系统学习webpack篇

webpack 是什么?

本质上webpack是一个现代javascript应用程序的静态打包工具。
其它基础概念,查看官方文档

webpack 基础篇

loader

webpack 只能理解javascript和json文件。loader可以让它能够处理其他类型的文件，并将其转换有效模块。

file-loader & url-loader

两者主要功能都是对加载资源进行打包,但是 url-loader设置资源大小来对小资源进行打包js内，来减少网络带宽

 module: {
   
    // rules: [
    //   { 
    //     test: /\.(png|jpg|gif)$/, 
    //     use: {
   
    //       loader:'file-loader',
    //       options:{
   
    //         name:'[name].[ext]'
    //       }
    //     }
    //    },
      {
   
        test: /\.(png|jpg|gif)$/,
        use: [
          {
   
            loader: 'url-loader',
            options:{
   
              limit:138228  //资源大小
            }
          }
        ]
      },
    ]
  },

***?*最终在浏览器端可以看到打包后得资源路径变为 ‘data:image/png;base64…’

style打包

安装

npm i style-loader css-loader -D

使用

{
   
  test:/\.css$/,
  use:[
    "style-loader",
    {
   
      loader:"css-loader",
      options:{
   
        importLoaders:2  //保证import 引入得样式会执行所有loader,
        modules:true  //样式模块化
      }
    }
    ]  //注意loader 顺序
}

css-loader 用户处理.css 文件，style-loader用于对样挂在标签上。
注意loader顺序， loader是从下到上 从右到左开始加载。

字体打包

file-loader 和 url-loader 可以接收并加载任何文件也包括字体.

{
   
  test:/\.(eot|svg|ttf|woff)$/,  //打包字体
  use:["file-loader"]
 },

plugin

可以在webpack 运行到某个时刻帮我们做一些事情比如:打包优化、资源管理、注入环境变量等。

• html-webpack-plugin
  • 会在打包结束后,自动生成一个html文件,并把打包生成的js自动引入到这个html文件中.
• clean-webpack-plugin
  • 在打包之前,帮助我们删除dist目录

  plugins:[
    new cleanWebpackPlugin(), //预先清理
    new htmlWebpackPlugin({
   
      title:'html plugin demo',
      template:'index.html'
    })
  ],

• friendly-errors-webpack-plugin
  它可以识别某些类别的webpack错误，并清理，聚合和优先级，以提供更好的开发人员体验。

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
plugins:[
   new FriendlyErrorsPlugin({
   
            compilationSuccessInfo: {
   
              messages: ['You application is running here http://localhost:3000'],
              notes: ['Some additionnal notes to be displayed unpon successful compilation']
            },
            onErrors: function (severity, errors) {
   
              // You can listen to errors transformed and prioritized by the plugin
              // severity can be 'error' or 'warning'
            },
            // should the console be cleared between each compilation?
            // default is true
            clearConsole: true,
           
            // add formatters and transformers (see below)
            additionalFormatters: [],
            additionalTransformers: []
          })
]

• webpack-build-notifier
  它使用节点通知程序模块显示Webpack构建错误和警告的操作系统级别通知。

const WebpackBuildNotifierPlugin=require('webpack-build-notifier');

{
   
devServer:{
   
  //...
  quiet:true
},
  plugins:[
    new WebpackBuildNotifierPlugin({
   
            title: "My Project Webpack Build",
            // logo: path.resolve("./img/favicon.png"),
            suppressSuccess: true
          }),
  ]
}

开发环境(devtool)

sourceMap:
它是一个映射关系,可以找到打包后代码位置在打包