webpack 入门

1. npm -init 初始化一个环境

2. 打包命令 webpack [entry path] -o [output path] -mode=[development | prodution]

webpack 只能处理 js json 资源 将ES6模块化的代码编译成ES5(浏览器能识别)

3. 处理其他的资源 loader

4. webpack.config.js 运行webpack指令时候加载里面的配置，依据里面的配置项去打包， 基于node平台运行，模块化采用 commonjs

5. webpack 5个核心概念

   • entry
   • output
   • loader
   • plugin
   • babel

6. css-loader

   • css-loader 将css代码变成commonjs模块加载js，解析成css字符串
   • style-loader 将js的css样式资源串接 <style></style>标签插入到页面中<header></header>去生效
   • test 正则去匹配css文件，use是执行对应的loader(从右到左的顺序)

7. webpack打包html资源

   • plugin 需要下载、引用、使用，它不像loader直接用
   • html-webpack-plugin 默认会创建一个空的html文件，引入打包输出的所有资源, 为了让html有结构不是空的，所以要设置一个html 模板

        // 插件
       plugins: [
         new HtmlWwebpackPlugin({
           template: './src/index.html'
         })
       ]
     

8. 打包图片资源

   • url-loader file-loader
   • 默认处理不了html中的图片
   • 解决： 加一个 html-loader , 并且配置

     {
         test: /\.html$/,
         loader: 'html-loader', // 负责处理html 里 img 负责引入img
         options: {
           esModule: false // 改成commonjs的引入方式，防止 生成图片但是 页面找不到图片
         }
     }
     

9. 打包其他资源

   • 不需要做任何处理的资源
   • loader rules排除掉需要loader的资源，使用 file-loader去处理

10. devServer 热部署

    • 不属于核心概念
    • 配置

      devServer: {
       contentBase: path.resolve(__dirname, 'build'),
       // 启用gzip压缩
       compress: true,
       port: 1080
      }
      

    • webpack 5.x 启动 npx webpack server