前端模块打包工具 #

// webpack.config.js
// 这是一个运行在 node 环境下的文件，需要遵循 CommonJS 规范

const path = require('path')

module.exports = {
  entry: './src/main.js', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'output') // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
  }
}

// 默认模式
yarn webpack --mode production // 生产模式，自动启动一些优化插件，例如代码压缩，但代码无法阅读

yarn webpack --mode development // 开发模式，优化打包速度，添加一些调试过程当中需要的辅助到我们代码当中

yarn webpack --mode none // 最原始状态的打包，没有任何额外的处理


// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'development', // 打包模式
  entry: './src/main.js', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'output') // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
  }
}

// webpack 默认会把所有文件都当作 js 文件来处理，内部 loader 只能处理js文件
// 我们还可以为其他类型的资源文件添加不同的 Loader

yarn add css-loader --dev // css加载器

// 注意：css-loader 作用就是将 css 文件转换成为一个 js 模块，具体的实现就是将 css 的代码 Push 到一个数组当中
// 整个过程没有一个地方用到了这个数组，所以还需要另一个 loader

yarn add style-loader --dev // 把 css-loader 转换过后的结果通过 style 标签的形式追加到页面上


// webpack.config.js

const path = require('path')

module.exports = {
  mode: 'none',
  entry: './src/main.css', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'output') // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
  },
  module: {
    // 针对于其他资源模块加载规则的配置，每一个规则对象都需要设置两个属性 test: 正则表达式，用于匹配打包过程当中遇到的文件路径， use：用来指定匹配到的文件需要使用的 loader
    // use 可以是一个数组，并且是从后往前依次执行的
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

// main.js

import createHeading from './heading.js'
import './main.css' // 引入 css

const heading = createHeading()

document.body.append(heading)


//===========================================
// heading.js

import './heading.css' // 引入 css

export default () => {
  const element = document.createElement('h2')

  element.textContent = 'Hello World'
  element.classList.add('heading')
  element.addEventListener('click', () => {
    alert('Hello webpack')
  })

  return element
}

-- yarn add file-loader --dev



// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'none',
  entry: './src/main.css', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'dist'), // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
    publicPath: 'dist/' // 指定打包过后的文件，最终在网站上的位置
  },
  module: {
    // 针对于其他资源模块加载规则的配置，每一个规则对象都需要设置两个属性 test: 正则表达式，用于匹配打包过程当中遇到的文件路径， use：用来指定匹配到的文件需要使用的 loader
    // use 可以是一个数组，并且是从后往前依次执行的
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: 'file-loader'
      }
    ]
  }
}

-- yarn add url-loader --dev

const path = require('path')

module.exports = {
  mode: 'none',
  entry: './src/main.css', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'dist'), // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
    publicPath: 'dist/' // 指定打包过后的文件，最终在网站上的位置
  },
  module: {
    // 针对于其他资源模块加载规则的配置，每一个规则对象都需要设置两个属性 test: 正则表达式，用于匹配打包过程当中遇到的文件路径， use：用来指定匹配到的文件需要使用的 loader
    // use 可以是一个数组，并且是从后往前依次执行的
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: 'url-loader'
      }
    ]
  }
}

const createHeading = require('./headeing.js').default

// main.js

// yarn add html-loader --dev

// html 文件默认会将 html 代码作为字符串导出，所以需要接收一下
import footerHtml from './footer.html'

document.write(footerHtml)

-- yarn add clean-webpack-plugin

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: './src/main.js', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'dist'), // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
    publicPath: 'dist/' // 指定打包过后的文件，最终在网站上的位置
  },
  module: {
    // 针对于其他资源模块加载规则的配置，每一个规则对象都需要设置两个属性 test: 正则表达式，用于匹配打包过程当中遇到的文件路径， use：用来指定匹配到的文件需要使用的 loader
    // use 可以是一个数组，并且是从后往前依次执行的
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10KB
          }
        }
      }
    ]
  },
  // 使用插件，需要为配置对象添加一个 plugin 属性，这个属性专门用来配置的地方，它是一个数组
  plugins: [
     // 绝大多数的插件导出的都是一个类型，所以一般在使用的时候通过这个类型去创建一个实例
    new CleanWebpackPlugin(),
  ]
}

-- yarn add html-webpack-plugin

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin  = require('html-webpack-plugin') // 默认导出的就是一个插件的类型,不需要解构它内部成员

module.exports = {
  mode: 'none',
  entry: './src/main.js', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'dist'), // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
    // 使用 html-webpack-plugin，不需要指定 dist 目录
    // publicPath: 'dist/' // 指定打包过后的文件，最终在网站上的位置
  },
  module: {
    // 针对于其他资源模块加载规则的配置，每一个规则对象都需要设置两个属性 test: 正则表达式，用于匹配打包过程当中遇到的文件路径， use：用来指定匹配到的文件需要使用的 loader
    // use 可以是一个数组，并且是从后往前依次执行的
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10KB
          }
        }
      }
    ]
  },
  // 使用插件，需要为配置对象添加一个 plugin 属性，这个属性专门用来配置的地方，它是一个数组
  plugins: [
     // 绝大多数的插件导出的都是一个类型，所以一般在使用的时候通过这个类型去创建一个实例
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ]
}

plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width',
      }
    })
  ]

 plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width',
      },
      template: './src/index.html'
    })
  ]

 plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width',
      },
      template: './src/index.html'
    }),
    // 用于生成其他 html
    new HtmlWebpackPlugin({
      filename: 'about.html'
    })
  ]

-- yarn add copy-webpack-plugin

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 默认导出的就是一个插件的类型,不需要解构它内部成员
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: './src/main.js', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'dist'), // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
    // 使用 html-webpack-plugin，不需要指定 dist 目录
    // publicPath: 'dist/' // 指定打包过后的文件，最终在网站上的位置
  },
  module: {
    // 针对于其他资源模块加载规则的配置，每一个规则对象都需要设置两个属性 test: 正则表达式，用于匹配打包过程当中遇到的文件路径， use：用来指定匹配到的文件需要使用的 loader
    // use 可以是一个数组，并且是从后往前依次执行的
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10KB
          }
        }
      }
    ]
  },
  // 使用插件，需要为配置对象添加一个 plugin 属性，这个属性专门用来配置的地方，它是一个数组
  plugins: [
     // 绝大多数的插件导出的都是一个类型，所以一般在使用的时候通过这个类型去创建一个实例
    new CleanWebpackPlugin(),
    // 用于生成 index.html
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width',
      },
      template: './src/index.html'
    }),
    // 用于生成其他 html
    new HtmlWebpackPlugin({
      filename: 'about.html'
    }),
    // 需要传入一个数组，用于指定我们需要去拷贝的文件路径，它可以是通配符、目录、文件的相对路径
    new CopyWebpackPlugin([
      // 'public/**',
      'public'
    ])
  ]
}

devServer: {
    // 指定额外的静态资源路径，可以是一个或者多个路径
    static: {
      directory: path.join(__dirname, 'public'), // public 路径默认可被访问，不需要配置
    },
  },

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 默认导出的就是一个插件的类型,不需要解构它内部成员
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  mode: 'none',
  entry: './src/main.js', // 指定打包入口文件
  // 输出文件
  output: {
    filename: 'bundle.js', // 文件名
    path: path.join(__dirname, 'dist'), // 输出路径必须是一个绝对路径，使用 node 环境的 path获得绝对路径
    // 使用 html-webpack-plugin，不需要指定 dist 目录
    // publicPath: 'dist/' // 指定打包过后的文件，最终在网站上的位置
  },
  devServer: {
    // 指定额外的静态资源路径，可以是一个或者多个路径
    static: {
      directory: path.join(__dirname, 'public'), // public 路径默认可被访问
    },
    // 添加代理服务配置，每一个属性就是一个代理规则的配置，属性名称就是需要被代理的请求路径前缀
    proxy: {
      // 将 以/api 开头的地址代理到接口当中
      '/api': {
        // http://localhost:8080/api/users => https://api.github.com/api/users
        target: 'https://api.github.com', // 代理目标
        // 以正则的匹配方式，将代理路径的重写 http://localhost:8080/api/users => https://api.github.com/users
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true // 不能使用 localhost:8080 作为请求 接口 的主机名
      }
    },
  },
  module: {
    // 针对于其他资源模块加载规则的配置，每一个规则对象都需要设置两个属性 test: 正则表达式，用于匹配打包过程当中遇到的文件路径， use：用来指定匹配到的文件需要使用的 loader
    // use 可以是一个数组，并且是从后往前依次执行的
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /.png$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10 * 1024 // 10KB
          }
        }
      }
    ]
  },
  // 使用插件，需要为配置对象添加一个 plugin 属性，这个属性专门用来配置的地方，它是一个数组
  plugins: [
     // 绝大多数的插件导出的都是一个类型，所以一般在使用的时候通过这个类型去创建一个实例
    new CleanWebpackPlugin(),
    // 用于生成 index.html
    new HtmlWebpackPlugin({
      title: 'Webpack Plugin Sample',
      meta: {
        viewport: 'width=device-width',
      },
      template: './src/index.html'
    }),
    // 用于生成其他 html
    new HtmlWebpackPlugin({
      filename: 'about.html'
    }),
    // 需要传入一个数组，用于指定我们需要去拷贝的文件路径，它可以是通配符、目录、文件的相对路径
    // 开发阶段最好不要使用这个插件，因为开发阶段会频繁打包，会降低效率
    // new CopyWebpackPlugin([
    //   // 'public/**',
    //   'public'
    // ])
  ]
}

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin') 
const allModes = [
    'eval',
    'cheap-eval-source-map',
    'cheap-module-eval-source-map',
    'eval-source-map',
    'cheap-source-map',
    'cheap-module-source-map',
    'inline-cheap-source-map',
    'inline-cheap-module-source-map',
    'source-map',
    'inline-source-map',
    'hidden-source-map',
    'nosource-source-map'
]

// webpack 的配置对象可以是一个数组，数组中的每一个元素都是一个单独的打包配置，这样一来，我们就可以在一次打包过程中同时执行多个打包任务

module.export = allModes.map(item => {
    return {
        devtool: item,
        mode: 'none',
        entry: './src/main.js',
        output: {
            filename: `js/${item}.js`,
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            preset: ['@babel/preset-env']
                        }
                    }
                }
            ]
        },
        plugins: [
            // 用于生成 可以使用打包结果的Html
            new HtmlWebpackPlugin({
              filename: `${item}.html`
            }),
        ]
    }
})

// 配置文件开启
// webpack.config.js

const webpack = require('webpack')
devServer: {
    hot: true, // 启动热替换
}
module.exports = {
    // 使用内置 热模块替换 插件
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

// main.js 打包入口文件

module.hot.accept('./editer', ()=>{
    // 直接替换文件路径即可
    img.src = background
    console.log(background)
})

// main.js 打包入口

// 先判断是否存在hot对象
if(module.hot){
    ...
}

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 默认导出的就是一个插件的类型,不需要解构它内部成员
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')

// webpack 的配置文件还支持导出一个函数，在这个函数中返回配置对象
// env:环境参数，argv:运行cli过程中所传递的所有参数
module.exports = (env, argv) => {
  const config = {
    // ...
  }

  if(env === 'production') {
    config.mode = 'production'
    config.devtool = false
    config.plugins = [
      ...config,
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin(['plubic'])
    ]
  }
}

// 我们一般需要三个webpack配置文件
// 1. webpack.common.js
// 2. webpack.dev.js
// 3. webpack.prod.js

// webpack.prod.js
// Object.assign() 函数的特性会导致一些属性被覆盖，所有我们使用社区提供的专业模块
// npm i webpack-merge -D

const = require('./webpack.common')
const merge = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

moudle.export = merge({}, common, {
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin(['plubic'])
    ]
})


npm run webpack --config webpack.prod.js

const webpack = require('webpack')

module.exports = {
  plugins: [
    // 注入全局成员
    // 注意这里需要注入的是一个可以执行的代码片段
    new webpack.DefinePlugin({
      API_BASE_URL: JSON.stringify('https://api.example.com')
    })
  ]
}

// 手动配置开启 Tree Shaking（内部实现）

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js'
    },
    // 集中配置 webpack 内部的优化功能
    optimization: {
        useExport: true, // 只导出那些外部使用了的成员（标记枯树叶）
        minimize: true, // 启用代码压缩功能，去掉没有用到的代码（摇落枯叶）
    }
}

// 手动配置开启 Tree Shaking（内部实现）

module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js'
    },
    // 集中配置 webpack 内部的优化功能
    optimization: {
        useExport: true,
        concatenateModules: true, // 开启合并模块
        minimize: true, 
    }
}

// 如果不确定版本，也可以强制关闭 module 转换
module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@bable/preset-env', { modules: false }]
            ]
          }
        }
      }
      ]
}

// webpack.config.js

// 开启 sideEffects 过后，就会先检查当前代码所属的这个 package.json 当中，有没有 sideEffects 的标识，以此来判断是否有副作用
// 如果这个模块没有副作用，那这些没有用到的模块不会再被打包
module.exports = {
    mode: 'none',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js'
    },
    // 集中配置 webpack 内部的优化功能
    optimization: {
        sideEffects: true,
    }
}

// package.json
"sideEffects": false

// webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'none',
  // 指定多个打包入口文件
  entry: {
      index: './src/index.js',
      album: './src/album.js'
  }, 
  // 生成动态文件名
  output: {
    filename: '[name].bundle.js',
  },
  optimization: {
    // 把所有的公共模块都提取到单独的 Bundle 当中
    splitChunks: {
        chunks: 'all'
    },
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index'], // 每一个打包入口都会形成一个独立的 chunks ，不会重复引入其他模块
    }),
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/album.html',
      filename: 'album.html',
      chunks: ['album'],
    }),
  ]

npm i mini-css-extract-plugin -D

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    module: {
        rules: [
            test: /\.css$/,
            use: [
                // 'style-loader', // 将样式通过 style 标签注入
                // 使用 MiniCssExtractPlugin 插件的loader取代 style-loader
                MiniCssExtractPlugin.loader, // 插件将css文件单独打包到一个文件，通过 link 标签的方式注入
                'css-loader'
            ]
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
}

npm i optimize-css-assets-webpack-plugin -D

// webpack.config.js
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    module: {
        rules: [
            test: /\.css$/,
            use: [
                // 'style-loader', // 将样式通过 style 标签注入
                MiniCssExtractPlugin.loader, // 插件将css文件单独打包到一个文件，通过 link 标签的方式注入
                'css-loader'
            ]
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new OptimizeCssAssetsWebpackPlugin()
    ]
}

npm i terser-webpack-plugin -D

// webpack.config.js
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
    optimization: {
        minimizer: [
            new TerserWebpackPlugin()
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    module: {
        rules: [
            test: /\.css$/,
            use: [
                // 'style-loader', // 将样式通过 style 标签注入
                MiniCssExtractPlugin.loader, // 插件将css文件单独打包到一个文件，通过 link 标签的方式注入
                'css-loader'
            ]
        ]
    },
    plugins: [
        new MiniCssExtractPlugin(),
        // new OptimizeCssAssetsWebpackPlugin()
    ]
}

module.exports = {
    mode: 'none',
    entry: {
        main: './src/index.js',
    },
    output: {
        filename: '[name]-[hash].bundle.js'
    },
    optimization: {
        minimizer: [
            new TerserWebpackPlugin()
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    module: {
        rules: [
            test: /\.css$/,
            use: [
                // 'style-loader', // 将样式通过 style 标签注入
                MiniCssExtractPlugin.loader, // 插件将css文件单独打包到一个文件，通过 link 标签的方式注入
                'css-loader'
            ]
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]-[hash].bundle.css'
        }),
    ]
}

module.exports = {
    mode: 'none',
    entry: {
        main: './src/index.js',
    },
    output: {
        filename: '[name]-[chunkhash].bundle.js'
    },
    optimization: {
        minimizer: [
            new TerserWebpackPlugin()
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    module: {
        rules: [
            test: /\.css$/,
            use: [
                // 'style-loader', // 将样式通过 style 标签注入
                MiniCssExtractPlugin.loader, // 插件将css文件单独打包到一个文件，通过 link 标签的方式注入
                'css-loader'
            ]
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]-[chunkhash].bundle.css'
        }),
    ]
}

module.exports = {
    mode: 'none',
    entry: {
        main: './src/index.js',
    },
    output: {
        filename: '[name]-[contenthash].bundle.js'
    },
    optimization: {
        minimizer: [
            new TerserWebpackPlugin()
            new OptimizeCssAssetsWebpackPlugin()
        ]
    },
    module: {
        rules: [
            test: /\.css$/,
            use: [
                // 'style-loader', // 将样式通过 style 标签注入
                MiniCssExtractPlugin.loader, // 插件将css文件单独打包到一个文件，通过 link 标签的方式注入
                'css-loader'
            ]
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]-[contenthash].bundle.css'
        }),
    ]
}

module.exports = {
    output: {
        filename: '[name]-[contenthash:8].bundle.js'
    },
}