webpack学习笔记

1.使用步骤

• 初始化项目 npm init -y
• 安装依赖npm i -D webpack webpack-cli
• 创建src文件夹，index.js为主文件
• 运行 npx webpack
• 实时监测webpack的变化，并在运行时自动打开浏览器页面npx webpack serve --open，但是使用时得先安装webpack开发服务器 npm i -D webpack-dev-server --open
• npx webpack --watch 和上面的功能一样，不同的是上面的命令执行是浏览器打开的是本地服务器，而它浏览器打开的是打包后的本地路径的html文件。

2. 配置文件（webpack.config.js）

• mode  有开发模式development和生产模式production
• entry  入口文件，指定打包时的主文件，默认是./src/index.js,如果是多个入口文件，可以使用数组或者对象，使用对象时，对象的属性名会成为打包后的文件名
• output  输出目录，其中path属性指定打包的目录，是绝对路径；filename属性指定打包后的文件名，当有多个入口文件时，可以设置为动态的文件名（filename:[name]-[id]-[hash]）；clean属性用来决定打包目录是否自动清理，值为boolean。
• 配置loader（loader执行顺序是从后往前执行）                                                                  代码需要编译的就需要配置loader，如css,less,ts,图片，babel等等。npm下载对应的loader后，在module里配置，module和entry，output平级，moudule里再用rules配置loader，rules是数组，里面可以添加多个对象，每个对象得有test属性，用来正则匹配文件的后缀名。 
• 配置插件plugins                                                                                                                  插件和loader不同的是，插件一般是功能性的，比如html-webpack-plugin是打包的时候生成HTML文件。插件配置要先下载npm i -D html-webpack-plugin，再引入插件，如const HTMLPlugin = require('html-webpack-plugin')，引入后在plugins数组中new一下即可。
• 调试打包的文件，devtool: 'inline-source-map'，在webpack运行时，一些错误不会在终端显示，打包后很难定位到在什么地方出错，有上面这个配置即可方便的找的出错的代码。
• resolve 用来设置引用模块，有它就可以使用模块化了，resolve有个属性extensions:['js','ts']，用来设置以什么结尾的文件可以使用模块化。

代码示例

const path = require('path')

const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',// production生产模式，development开发模式
  entry: './src/index.js',
  // entry: './hello/hello.js',
  // entry:['./src/a.js','./src/b.js']
  // entry: {
  //   hello: './src/a.js',
  //   a: './src/b.js'
  // }
  //指定打包时的主文件，默认是./src/index.js,如果是多个入口文件，可以使用数组或者对象，使用对象时，对象的属性名会成为打包后的文件名
  output: {
    path: path.resolve(__dirname,'dist'),//指定打包目录，必须为绝对路径
    filename: 'bundle.js',//打包后的文件名
    //filename:[name]-[id]-[hash],//文件名是动态的，会自动在入口文件里找到并填入
    clean: true,//自动清理打包目录，清理的是path的
  },

  // 配置loader
  // 注意loader是从后往前执行
  module: {
    rules: [
    // css资源
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      // 图片
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        type: 'asset/resource'
      },

      {
        test: /\.m?js$/, //以mjs(模块化)或js结尾的文件
        exclude: /(node_modules | bower_components)/, //除了它两都打包
        use: {
          loader: 'babel-loader',
          options: {
            presets:['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new HTMLPlugin({
      title: 'hello title',//html标题
      // template:'./src/index.html',以src的HTML文件为模板进行打包的HTML构建
    })
  ],

  // 打包文件可以在源码上打断点来调试
  devtool: 'inline-source-map',
}