webpack基本用法

1. webpack中文网

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)

1. 初始化package.json文件

   yarn init # or npm init
   

2. 安装webpack模块

   yarn add webpack webpack-cli --dev # or npm i webpack webpack-cli -D
   

3. 在项目根目录下创建webpack.config.js配置文件

2. Webpack配置入口文件和打包后的文件

const path = require('path')

module.exports = {
  mode: 'development'
  entry: './src/main.js', // 打包的入口的文件
  output: {
    filename: 'bundle.js', // 输出文件的名称
    path: path.join(__dirname, 'dist') // 指定输出文件所在的目录，必须为绝对路径
  }
}

工作模式：

1. （默认）生产模式下（production），Webpack 会自动优化打包结果

2. 开发模式下（development），Webpack 会自动优化打包速度，添加一些调试过程中的辅助

3. None 模式下，Webpack 就是运行最原始的打包，不做任何额外处理

3. webpack资源模块加载（loader）

1. 加载 css

   yarn add css-loader style-loader -D
   

   module.exports = {
     ...
     module: {
       rules: [
         {
           test: /.css$/,
           use: [
             'style-loader', // 将 css-loader 转换后的结果通过 style 标签追加到页面上
             'css-loader' // 将 css 文件转换为 js 模块
           ]
         }
       ]
     }
   }
   

2. 加载文件资源

   yarn add file-loader -D
   

   module.exports = {
     ...
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist'),
       publicPath: 'dist/'
     },
     module: {
       rules: [
         {
           test: /.png$/,
           use: 'file-loader'
         }
       ]
     }
   }
   

3. URL加载器

    yarn add url-loader -D
   

   module.exports = {
     ...
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist'),
       publicPath: 'dist/'
     },
     module: {
       rules: [
        {
           test: /.png$/,
           use: {
             loader: 'url-loader',
             options: {
               limit: 10 * 1024 // 10 KB
             }
           }
         }
       ]
     }
   }
   
   /* 
     打包出来的结果：
       data:[<mediatype>][;base64],<data>
       协议      媒体类型和编码      文件内容
   */
   

   小文件使用url-loader转换为Data URls嵌入代码中，减少请求次数

   大文件（超过10kb）单独提取存放，通过file-loader提高加载速度

4. babel-loader：处理 ES6代码

   yarn add babel-loader @babel/core @babel/preset-env -D
   

   rules: [
     {
       test: /.js$/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['@babel/preset-env']
         }
       }
     }
   ]
   

4. 插件机制（plugins）

1. 自动清除输出目录插件

   yarn add clean-webpack-plugin -D
   

   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   
   module.exports = {
     ...
     plugins: [
       new CleanWebpackPlugin()
     ]
   }
   

2. 自动生成使用打包结果的HTML文件

   yarn add html-webpack-plugin -D
   

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
     output: {
       filename: 'bundle.js',
       path: path.join(__dirname, 'dist'),
       // publicPath: 'dist/'
     },
     plugins: [
       new HtmlWebpackPlugin()
     ]
   }
   

   // 生成自定义的 index.html 页面
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Webpack Plugin Sample',
       meta: {
         viewport: 'width=device-width'
       },
       template: './src/index.html' // 可定义所使用的模板
     }), 
   ]
   

   // 同时输出多个页面文件
   plugins: [
     // 用于生成 index.html
     new HtmlWebpackPlugin({
       title: 'Webpack Plugin Sample',
       meta: {
         viewport: 'width=device-width'
       },
       template: './src/index.html' // 可定义所使用的模板
     }),
     // 用于生成 about.html
     new HtmlWebpackPlugin({
       filename: 'about.html'
     })
   ]
   

3. 拷贝静态资源文件到打包目录

   yarn add copy-webpack-plugin -D
   

   const CopyWebpackPlugin = require('copy-webpack-plugin')
   
   plugins: [
     new CopyWebpackPlugin([
       // 'public/**'
       'public'
     ])
   ]