webpack5 学习

注意：

webpack5 使用 html-webpack-plugin 时会报错 The 'compilation' argument must be an instance of Compilation，解决办法是把该插件的安装方法从 npm i html-webpack-plugin -D 改为 npm i html-webpack-plugin@next -D
修改 npm 下载速度慢，将下载地址改为淘宝的镜像

npm install jquery --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org

webpack5 使用webpack-dev-server时，不能再使用npx webpack-dev-server，启动开发服务器了，需要使用npx webpack server来启动开发服务器

笔记

webpack5 大核心：entry,output,loader,plugins,mode。
安装 webpack 使用 npm i webpack -g 进行全局安装，4+以上的版本还需要安装webpack-cli，同样是使用npm i webpack-cli -g进行安装。
使用 webpack使用webpack ./src/index.js -o ./build --mode=development命令，在命令行中进行调用，意思是webpack会以./src/index.js 为入口文件进行打包，打包后输出到./build文件中，整体的打包环境是开发环境。环境分为：开发环境和生产环境。二者的区别在于，生产环境进行代码的压缩。默认情况下，webpack不能打包js/json以外的文件类型。

webpack.config.js是webpack的配置文件，能够方便的将之前的命令行，写成 js，便于打包的自定义。

javascript

const { resolve } = require('path'); // 调用nodejs 默认的方法，获取文件的绝对地址

module.exports={
  entry:'', // 入口文件
  output:{
    filename:'', // 输出文件名
    path: resolve(__dirname,'build'), // 输出地址
  },
  module:{
    rules:[
      // 详细的loader配置
      {
        test:/\.css$/, // 正则匹配对应的文件类型
        use:[  // 调用的loader进行处理，倒序，或者是从右往左
          'style-loader',
          'css-loader'
          ]
      }
    ]
  },
  plugins:[
    // 详细的plugins配置
  ],
  mode:'development'

}

webpack.config.js中module->rules->use的顺序 use中的 loader 采用倒序的结构，或者从又往左。
javascript
```
  use: [
  'style-loader',
  'css-loader',
  'less-loader'
  ]

  use: ['style-loader','css-loader','less-loader']
```
意思是指，首先调用less-loader解析less文件，再将解析后的css文件变成commonjs模块加载js中，内容样式是字符串，最后style-loader是创建style标签，再将js中的样式资源插入，添加到head中生效。

devServer开发服务器由于每次写了代码再打包，再刷新浏览器才能看到最后的效果，比较麻烦。所以可以使用webpack提供的开发服务器devServer，不同于 5 大核心，是在核心之后进行调用的。

javascript

module.exports = {
  entry:'',
  output:{
    filename:'',
    path:resolve(__dirname,''),
  },
  module:{
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugins({
      template:''
    })
  ],
  mode:'development',

  // ---------------------------------------
  devServer: {
    // 运行项目的目录
    contentBase: resolve(__dirname, 'bulid'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5050,
    // 自动打开浏览器
    open: true
  }
}

devServer用于自动化编译，只会在内存中打包，不会进行输出，能够方便的进行开发，启动devServer的指令为: (webpack4)npx webpack-dev-server (webpack5)npx webpack serve

webpack5 学习 ​

注意： ​

笔记 ​

webpack5 学习

注意：

笔记