1. const path = require('path')
  3. module.exports = {
  4.     // 模式 development production
  5.     mode: 'development',
  6.     // 入口起点
  7.     entry:'./src/index.js',
  8.     // 输出
  9.     output: {
  10.         // 输出路径
  11.         // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  12.         path: path.resolve(__dirname,'dist'),
  13.         // 输出文件名
  14.         filename: '[name].js'
  15.     },
  16.     module: {
  17.         rules:[
  18.             // 详细loader配置【
  19.             // 不同文件必须配置不同loader
  20.             {
  21.                 // 匹配哪些文件
  22.                 test: /\.css$/,
  23.                 // 使用哪些loader进行处理
  24.                 use: [
  25.                     // use数组中loader执行顺序：从右到左，从下到上 依次执行
  26.                     // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  27.                     'style-loader',
  28.                     // 将css文件变成commonjs模块 加载js中，里面的内容是样式字符串
  29.                     'css-loader'
  30.                 ]
  31.             },
  32.             {
  33.                 test: /\.less$/,
  34.                 use: [
  35.                     'style-loader',
  36.                     'css-loader',
  37.                     // 将less文件编译成 css文件
  38.                     'less-loader'
  39.                 ]
  40.             }
  41.         ]
  42.     },
  43.     plugins: [
  44.         // 详细plugins的配置
  45.     ]
  47. }

打包html资源

  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const path = require('path')
  6. const HtmlWebpackPlugin = require('html-webpack-plugin')
  8. module.exports = {
  9.     // 模式 development production
  10.     mode: 'development',
  11.     // 入口起点
  12.     entry:'./src/index.js',
  13.     // 输出
  14.     output: {
  15.         // 输出路径
  16.         // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  17.         path: path.resolve(__dirname,'dist'),
  18.         // 输出文件名
  19.         filename: 'built.js'
  20.     },
  21.     module: {
  22.         rules:[
  23.             // 详细loader配置
  24.             // 不同文件必须配置不同loader
  25.             {
  26.                 // 匹配哪些文件
  27.                 test: /\.css$/,
  28.                 // 使用哪些loader进行处理
  29.                 use: [
  30.                     // use数组中loader执行顺序：从右到左，从下到上 依次执行
  31.                     // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  32.                     'style-loader',
  33.                     // 将css文件变成commonjs模块 加载js中，里面的内容是样式字符串
  34.                     'css-loader'
  35.                 ]
  36.             },
  37.             {
  38.                 test: /\.less$/,
  39.                 use: [
  40.                     'style-loader',
  41.                     'css-loader',
  42.                     // 将less文件编译成 css文件
  43.                     'less-loader'
  44.                 ]
  45.             }
  46.         ]
  47.     },
  48.     plugins: [
  49.         // 详细plugins的配置
  50.         // HtmlWebpackPlugin
  51.         // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  52.         // 需求：需要有结构的HTML文件
  53.         new HtmlWebpackPlugin({
  54.             // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  55.             template: './src/index.html'
  56.         })
  57.     ]
  59. }

打包图片资源

  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const path = require('path')
  6. const HtmlWebpackPlugin = require('html-webpack-plugin')
  8. module.exports = {
  9.   // 模式 development production
  10.   mode: 'development',
  11.   // 入口起点
  12.   entry: './src/index.js',
  13.   // 输出
  14.   output: {
  15.     // 输出路径
  16.     // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  17.     path: path.resolve(__dirname, 'dist'),
  18.     // 输出文件名
  19.     filename: 'built.js'
  20.   },
  21.   module: {
  22.     rules: [
  23.       // 详细loader配置
  24.       // 不同文件必须配置不同loader
  25.       {
  26.         // 匹配哪些文件
  27.         test: /\.css$/,
  28.         // 使用哪些loader进行处理
  29.         use: [
  30.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  31.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  32.           'style-loader',
  33.           // 将css文件变成commonjs模块 加载js中，里面的内容是样式字符串
  34.           'css-loader'
  35.         ]
  36.       },
  37.       {
  38.         test: /\.less$/,
  39.         use: [
  40.           'style-loader',
  41.           'css-loader',
  42.           // 将less文件编译成 css文件
  43.           'less-loader'
  44.         ]
  45.       },
  46.       {
  47.         // 问题： 默认处理不了html中img图片
  48.         // 处理图片资源
  49.         test: /\.(jpg|png|jpeg|gif)$/,
  50.         // 下载url-loader file-loader (url-loader依赖于file-loader)
  51.         loader: 'url-loader',
  52.         options: {
  53.           // 图片大小小于8kb，就会被base64处理，
  54.           // 优点：减少请求数量（减轻服务器压力）
  55.           // 缺点：图片体积会更大（文件请求速度更慢）
  56.           limit: 8 * 1024,
  57.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
  58.           // 解析时会出问题：[object Module]
  59.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  60.           esModule: false,
  61.           // 给图片进行重命名
  62.           // [hash:10]取图片的hash的前10位
  63.           // [ext]取文件原来扩展名
  64.           name: '[hash:10].[ext]'
  65.         }
  66.       },
  67.       {
  68.         test: /\.html$/,
  69.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  70.         loader: 'html-loader'
  71.       }
  72.     ]
  73.   },
  74.   plugins: [
  75.     // 详细plugins的配置
  76.     // HtmlWebpackPlugin
  77.     // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  78.     // 需求：需要有结构的HTML文件
  79.     new HtmlWebpackPlugin({
  80.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  81.       template: './src/index.html'
  82.     })
  83.   ]
  84. }

打包字体资源

  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const path = require('path')
  6. const HtmlWebpackPlugin = require('html-webpack-plugin')
  8. module.exports = {
  9.   // 模式 development production
  10.   mode: 'development',
  11.   // 入口起点
  12.   entry: './src/index.js',
  13.   // 输出
  14.   output: {
  15.     // 输出路径
  16.     // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  17.     path: path.resolve(__dirname, 'dist'),
  18.     // 输出文件名
  19.     filename: 'built.js'
  20.   },
  21.   module: {
  22.     rules: [
  23.       // 详细loader配置
  24.       // 不同文件必须配置不同loader
  25.       {
  26.         // 匹配哪些文件
  27.         test: /\.css$/,
  28.         // 使用哪些loader进行处理
  29.         use: [
  30.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  31.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  32.           'style-loader',
  33.           // 将css文件变成commonjs模块 加载js中，里面的内容是样式字符串
  34.           'css-loader'
  35.         ]
  36.       },
  37.       {
  38.         test: /\.less$/,
  39.         use: [
  40.           'style-loader',
  41.           'css-loader',
  42.           // 将less文件编译成 css文件
  43.           'less-loader'
  44.         ]
  45.       },
  46.       {
  47.         // 问题： 默认处理不了html中img图片
  48.         // 处理图片资源
  49.         test: /\.(jpg|png|jpeg|gif)$/,
  50.         // 下载url-loader file-loader (url-loader依赖于file-loader)
  51.         loader: 'url-loader',
  52.         options: {
  53.           // 图片大小小于8kb，就会被base64处理，
  54.           // 优点：减少请求数量（减轻服务器压力）
  55.           // 缺点：图片体积会更大（文件请求速度更慢）
  56.           limit: 8 * 1024,
  57.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
  58.           // 解析时会出问题：[object Module]
  59.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  60.           esModule: false,
  61.           // 给图片进行重命名
  62.           // [hash:10]取图片的hash的前10位
  63.           // [ext]取文件原来扩展名
  64.           name: '[hash:10].[ext]'
  65.         }
  66.       },
  67.       {
  68.         test: /\.html$/,
  69.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  70.         loader: 'html-loader'
  71.       },
  72.       // 打包其他资源
  73.       {
  74.         // 排除css/js/html资源
  75.         exclude: /\.(css|js|html|less|jpg|png|jpeg|gif)/,
  76.         loader: 'file-loader',
  77.         options: {
  78.             name: '[hash:10].[ext]'
  79.         }
  80.       }
  81.     ]
  82.   },
  83.   plugins: [
  84.     // 详细plugins的配置
  85.     // HtmlWebpackPlugin
  86.     // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  87.     // 需求：需要有结构的HTML文件
  88.     new HtmlWebpackPlugin({
  89.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  90.       template: './src/index.html'
  91.     })
  92.   ]
  93. }

devServer

  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const path = require('path')
  6. const HtmlWebpackPlugin = require('html-webpack-plugin')
  7. const { resolve } = require('path')
  9. module.exports = {
  10.   // 模式 development production
  11.   mode: 'development',
  12.   // 入口起点
  13.   entry: './src/index.js',
  14.   // 输出
  15.   output: {
  16.     // 输出路径
  17.     // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  18.     path: path.resolve(__dirname, 'dist'),
  19.     // 输出文件名
  20.     filename: 'built.js'
  21.   },
  22.   module: {
  23.     rules: [
  24.       // 详细loader配置
  25.       // 不同文件必须配置不同loader
  26.       {
  27.         // 匹配哪些文件
  28.         test: /\.css$/,
  29.         // 使用哪些loader进行处理
  30.         use: [
  31.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  32.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  33.           'style-loader',
  34.           // 将css文件变成commonjs模块 加载js中，里面的内容是样式字符串
  35.           'css-loader'
  36.         ]
  37.       },
  38.       {
  39.         test: /\.less$/,
  40.         use: [
  41.           'style-loader',
  42.           'css-loader',
  43.           // 将less文件编译成 css文件
  44.           'less-loader'
  45.         ]
  46.       },
  47.       {
  48.         // 问题： 默认处理不了html中img图片
  49.         // 处理图片资源
  50.         test: /\.(jpg|png|jpeg|gif)$/,
  51.         // 下载url-loader file-loader (url-loader依赖于file-loader)
  52.         loader: 'url-loader',
  53.         options: {
  54.           // 图片大小小于8kb，就会被base64处理，
  55.           // 优点：减少请求数量（减轻服务器压力）
  56.           // 缺点：图片体积会更大（文件请求速度更慢）
  57.           limit: 8 * 1024,
  58.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
  59.           // 解析时会出问题：[object Module]
  60.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  61.           esModule: false,
  62.           // 给图片进行重命名
  63.           // [hash:10]取图片的hash的前10位
  64.           // [ext]取文件原来扩展名
  65.           name: '[hash:10].[ext]'
  66.         }
  67.       },
  68.       {
  69.         test: /\.html$/,
  70.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  71.         loader: 'html-loader'
  72.       },
  73.       // 打包其他资源
  74.       {
  75.         // 排除css/js/html资源
  76.         exclude: /\.(css|js|html|less|jpg|png|jpeg|gif)/,
  77.         loader: 'file-loader',
  78.         options: {
  79.           name: '[hash:10].[ext]'
  80.         }
  81.       }
  82.     ]
  83.   },
  84.   plugins: [
  85.     // 详细plugins的配置
  86.     // HtmlWebpackPlugin
  87.     // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  88.     // 需求：需要有结构的HTML文件
  89.     new HtmlWebpackPlugin({
  90.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  91.       template: './src/index.html'
  92.     })
  93.   ],
  95.   // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新）
  96.   // 特点：只会在内存中编译打包，不会有任何输出
  97.   // 启动devServer指令为：npx webpack-dev-server
  98.   devServer: {
  99.     // 项目构建后的路径
  100.     contentBase: resolve(__dirname,'build'),
  101.     // 启动gzip压缩
  102.     compress: true,
  103.     // 端口号
  104.     port: 3000,
  105.     // 自动打开浏览器
  106.     open: true
  107.   }
  108. }

开发环境配置

  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const path = require('path')
  6. const HtmlWebpackPlugin = require('html-webpack-plugin')
  7. const { resolve } = require('path')
  9. module.exports = {
  10.   // 模式 development production
  11.   mode: 'development',
  12.   // 入口起点
  13.   entry: './src/js/index.js',
  14.   // 输出
  15.   output: {
  16.     // 输出路径
  17.     // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  18.     path: path.resolve(__dirname, 'dist'),
  19.     // 输出文件名
  20.     filename: 'js/built.js'
  21.   },
  22.   module: {
  23.     rules: [
  24.       // 详细loader配置
  25.       // 不同文件必须配置不同loader
  26.       {
  27.         // 匹配哪些文件
  28.         test: /\.css$/,
  29.         // 使用哪些loader进行处理
  30.         use: [
  31.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  32.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  33.           'style-loader',
  34.           // 将css文件变成commonjs模块 加载js中，里面的内容是样式字符串
  35.           'css-loader'
  36.         ]
  37.       },
  38.       {
  39.         test: /\.less$/,
  40.         use: [
  41.           'style-loader',
  42.           'css-loader',
  43.           // 将less文件编译成 css文件
  44.           'less-loader'
  45.         ]
  46.       },
  47.       {
  48.         // 问题： 默认处理不了html中img图片
  49.         // 处理图片资源
  50.         test: /\.(jpg|png|jpeg|gif)$/,
  51.         // 下载url-loader file-loader (url-loader依赖于file-loader)
  52.         loader: 'url-loader',
  53.         options: {
  54.           // 图片大小小于8kb，就会被base64处理，
  55.           // 优点：减少请求数量（减轻服务器压力）
  56.           // 缺点：图片体积会更大（文件请求速度更慢）
  57.           limit: 8 * 1024,
  58.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
  59.           // 解析时会出问题：[object Module]
  60.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  61.           esModule: false,
  62.           // 给图片进行重命名
  63.           // [hash:10]取图片的hash的前10位
  64.           // [ext]取文件原来扩展名
  65.           name: '[hash:10].[ext]',
  66.           outputPath: 'imgs'
  67.         }
  68.       },
  69.       {
  70.         test: /\.html$/,
  71.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  72.         loader: 'html-loader'
  73.       },
  74.       // 打包其他资源
  75.       {
  76.         // 排除css/js/html资源
  77.         exclude: /\.(css|js|html|less|jpg|png|jpeg|gif)/,
  78.         loader: 'file-loader',
  79.         options: {
  80.           name: '[hash:10].[ext]',
  81.           outputPath: 'media'
  82.         }
  83.       }
  84.     ]
  85.   },
  86.   plugins: [
  87.     // 详细plugins的配置
  88.     // HtmlWebpackPlugin
  89.     // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  90.     // 需求：需要有结构的HTML文件
  91.     new HtmlWebpackPlugin({
  92.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  93.       template: './src/index.html'
  94.     })
  95.   ],
  97.   // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新）
  98.   // 特点：只会在内存中编译打包，不会有任何输出
  99.   // 启动devServer指令为：npx webpack-dev-server
  100.   devServer: {
  101.     // 项目构建后的路径
  102.     contentBase: resolve(__dirname,'build'),
  103.     // 启动gzip压缩
  104.     compress: true,
  105.     // 端口号
  106.     port: 3000,
  107.     // 自动打开浏览器
  108.     open: true
  109.   }
  110. }

打包后的文件image.png

构建环境

image.png
开发模式一般追求快
生产模式需要做一些优化：代码压缩、兼容性处理、稳定性…

提取css成单独文件

需要下载 min-css-extract-plugin 

  1. npm i min-css-extract-plugin -D

这里要设置publicPath，不然 css 的背景图片无法显示

  1.  module: {
  2.     rules: [
  3.       // 详细loader配置
  4.       // 不同文件必须配置不同loader
  5.       {
  6.         // 匹配哪些文件
  7.         test: /\.(css|less)$/,
  8.         // 使用哪些loader进行处理
  9.         use: [
  10.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  11.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  12.           // 'style-loader',
  13.           // 这个loader取代style-loader 作用：提取js中的css成单独文件
  14.           {
  15.             loader: MiniCssExtractPlugin.loader,
  16.             options: {
  17.                 // 设置背景图片的路径
  18.                 publicPath: '../'
  19.             }
  20.           },
  21.           // 将css文件整合到js文件中
  22.           'css-loader',
  23.           'less-loader',
  24.         ], 
  25.       }
  26.     ]
  27. }
  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const HtmlWebpackPlugin = require('html-webpack-plugin')
  6. const { resolve } = require('path')
  7. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  8. module.exports = {
  9.   // 模式 development production
  10.   mode: 'development',
  11.   // 入口起点
  12.   entry: './src/js/index.js',
  13.   // 输出
  14.   output: {
  15.     // 输出路径
  16.     // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  17.     path: resolve(__dirname, 'dist'),
  18.     // 输出文件名
  19.     filename: 'js/built.js',
  20.   },
  21.   module: {
  22.     rules: [
  23.       // 详细loader配置
  24.       // 不同文件必须配置不同loader
  25.       {
  26.         // 匹配哪些文件
  27.         test: /\.(css|less)$/,
  28.         // 使用哪些loader进行处理
  29.         use: [
  30.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  31.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  32.           // 'style-loader',
  33.           // 这个loader取代style-loader 作用：提取js中的css成单独文件
  34.           {
  35.             loader: MiniCssExtractPlugin.loader,
  36.             options: {
  37.                 // 设置背景图片的路径
  38.                 publicPath: '../'
  39.             }
  40.           },
  41.           // 将css文件整合到js文件中
  42.           'css-loader',
  43.           'less-loader',
  44.         ],
  46.       },
  47.       {
  48.         // 问题： 默认处理不了html中img图片
  49.         // 处理图片资源
  50.         test: /\.(jpg|png|jpeg|gif)$/,
  51.         // 下载url-loader file-loader (url-loader依赖于file-loader)
  52.         loader: 'url-loader',
  53.         options: {
  54.           // 图片大小小于8kb，就会被base64处理，
  55.           // 优点：减少请求数量（减轻服务器压力）
  56.           // 缺点：图片体积会更大（文件请求速度更慢）
  57.           limit: 8 * 1024,
  58.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
  59.           // 解析时会出问题：[object Module]
  60.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  61.           esModule: false,
  62.           // 给图片进行重命名
  63.           // [hash:10]取图片的hash的前10位
  64.           // [ext]取文件原来扩展名
  65.           name: '[hash:10].[ext]',
  66.           outputPath: 'imgs'
  67.         }
  68.       },
  69.       {
  70.         test: /\.html$/,
  71.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  72.         loader: 'html-loader'
  73.       },
  74.       // 打包其他资源
  75.       {
  76.         // 排除css/js/html资源
  77.         exclude: /\.(css|js|html|less|jpg|png|jpeg|gif)/,
  78.         loader: 'file-loader',
  79.         options: {
  80.           name: '[hash:10].[ext]',
  81.           outputPath: 'media'
  82.         }
  83.       }
  84.     ]
  85.   },
  86.   plugins: [
  87.     // 详细plugins的配置
  88.     // HtmlWebpackPlugin
  89.     // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  90.     // 需求：需要有结构的HTML文件
  91.     new HtmlWebpackPlugin({
  92.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  93.       template: './src/index.html'
  94.     }),
  95.     new MiniCssExtractPlugin({
  96.       // 对输出的css文件进行重命名
  97.       filename: 'css/built.css'
  98.     })
  99.   ],
  101.   // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新）
  102.   // 特点：只会在内存中编译打包，不会有任何输出
  103.   // 启动devServer指令为：npx webpack-dev-server
  104.   devServer: {
  105.     // 项目构建后的路径
  106.     contentBase: resolve(__dirname, 'build'),
  107.     // 启动gzip压缩
  108.     compress: true,
  109.     // 端口号
  110.     port: 3000,
  111.     // 自动打开浏览器
  112.     open: true
  113.   }
  114. }

css兼容性处理

css浏览器兼容性处理：
postcss —> postcss-loader postcss-preset-env
帮postcss找到package.json中 browserslist 里面的配置，通过配置加载指定的css兼容性样式

  1. npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D

package.json中 的配置

  1. "browserslist": {
  2.     "development":[
  3.     # 最近一版的chorme
  4.       "last 1 chrome version",
  5.       "last 1 firefox version",
  6.       "last 1 safari version"
  7.     ],
  8.     "production":[
  9.     # 99.8% 的浏览器 没有死掉的 没有欧朋
  10.       ">0.2%",
  11.       "not dead",
  12.       "not op_mini all"
  13.     ]
  14.   }
  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const HtmlWebpackPlugin = require('html-webpack-plugin')
  6. const { resolve } = require('path')
  7. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  9. // 设置nodejs环境变量
  10. // process.env.NODE_ENV = 'development'
  12. module.exports = {
  13.   // 模式 development production
  14.   mode: 'development',
  15.   // 入口起点
  16.   entry: './src/js/index.js',
  17.   // 输出
  18.   output: {
  19.     // 输出路径
  20.     // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  21.     path: resolve(__dirname, 'dist'),
  22.     // 输出文件名
  23.     filename: 'js/built.js'
  24.   },
  25.   module: {
  26.     rules: [
  27.       // 详细loader配置
  28.       // 不同文件必须配置不同loader
  29.       {
  30.         // 匹配哪些文件
  31.         test: /\.(css|less)$/,
  32.         // 使用哪些loader进行处理
  33.         use: [
  34.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  35.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  36.           // 'style-loader',
  37.           // 这个loader取代style-loader 作用：提取js中的css成单独文件
  38.           {
  39.             loader: MiniCssExtractPlugin.loader,
  40.             options: {
  41.               // 设置背景图片的路径
  42.               publicPath: '../'
  43.             }
  44.           },
  45.           // 将css文件整合到js文件中
  46.           'css-loader',
  47.           'less-loader',
  48.           /*
  49.             css兼容性处理：
  50.             postcss --> postcss-loader postcss-preset-env
  51.             帮postcss找到package.json中 browserslist 里面的配置，通过配置加载指定的css兼容性样式
  52.             "browserslist": {
  53.               开发环境：需要设置环境变量 process.env.NODE_ENV = development
  54.               "development":[
  55.                 "last 1 chrome version",
  56.                 "last 1 firefox version",
  57.                 "last 1 safari version"
  58.               ],
  59.               生产环境：默认就是生产环境
  60.               "production":[
  61.                 ">0.2%",
  62.                 "not dead",
  63.                 "not op_mini all"
  64.               ]
  65.             }
  66.             */
  67.            {
  68.              loader: 'postcss-loader',
  69.              options: {
  70.                ident: 'postcss',
  71.                plugins: () => {
  72.                  // postcss的插件
  73.                  require('postcss-preset-env')()
  74.                }
  75.              }
  76.            }
  77.           // 使用loader的默认配置
  78.           // 'postcss-loader',
  79.           // 修改loader的配置
  80.         ]
  81.       },
  82.       {
  83.         // 问题： 默认处理不了html中img图片
  84.         // 处理图片资源
  85.         test: /\.(jpg|png|jpeg|gif)$/,
  86.         // 下载url-loader file-loader (url-loader依赖于file-loader)
  87.         loader: 'url-loader',
  88.         options: {
  89.           // 图片大小小于8kb，就会被base64处理，
  90.           // 优点：减少请求数量（减轻服务器压力）
  91.           // 缺点：图片体积会更大（文件请求速度更慢）
  92.           limit: 8 * 1024,
  93.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
  94.           // 解析时会出问题：[object Module]
  95.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  96.           esModule: false,
  97.           // 给图片进行重命名
  98.           // [hash:10]取图片的hash的前10位
  99.           // [ext]取文件原来扩展名
  100.           name: '[hash:10].[ext]',
  101.           outputPath: 'imgs'
  102.         }
  103.       },
  104.       {
  105.         test: /\.html$/,
  106.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  107.         loader: 'html-loader'
  108.       },
  109.       // 打包其他资源
  110.       {
  111.         // 排除css/js/html资源
  112.         exclude: /\.(css|js|html|less|jpg|png|jpeg|gif)/,
  113.         loader: 'file-loader',
  114.         options: {
  115.           name: '[hash:10].[ext]',
  116.           outputPath: 'media'
  117.         }
  118.       }
  119.     ]
  120.   },
  121.   plugins: [
  122.     // 详细plugins的配置
  123.     // HtmlWebpackPlugin
  124.     // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  125.     // 需求：需要有结构的HTML文件
  126.     new HtmlWebpackPlugin({
  127.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  128.       template: './src/index.html'
  129.     }),
  130.     new MiniCssExtractPlugin({
  131.       // 对输出的css文件进行重命名
  132.       filename: 'css/built.css'
  133.     })
  134.   ],
  136.   // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新）
  137.   // 特点：只会在内存中编译打包，不会有任何输出
  138.   // 启动devServer指令为：npx webpack-dev-server
  139.   devServer: {
  140.     // 项目构建后的路径
  141.     contentBase: resolve(__dirname, 'build'),
  142.     // 启动gzip压缩
  143.     compress: true,
  144.     // 端口号
  145.     port: 3000,
  146.     // 自动打开浏览器
  147.     open: true
  148.   }
  149. }

更多浏览器的配置可以在 github 搜索 browserslist

压缩css

需要下载插件 optimize-css-assets-webpack-plugin

  1. /* 
  2.     loader: 1.下载 2.使用
  3.     plugins: 1.下载  2.引用  3.使用
  4. */
  5. const HtmlWebpackPlugin = require('html-webpack-plugin')
  6. const { resolve } = require('path')
  7. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  8. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
  10. // 设置nodejs环境变量
  11. // process.env.NODE_ENV = 'development'
  13. module.exports = {
  14.   // 模式 development production
  15.   mode: 'development',
  16.   // 入口起点
  17.   entry: './src/js/index.js',
  18.   // 输出
  19.   output: {
  20.     // 输出路径
  21.     // __dirname nodejs的变量, 代表当前文件的目录绝对路径
  22.     path: resolve(__dirname, 'dist'),
  23.     // 输出文件名
  24.     filename: 'js/built.js'
  25.   },
  26.   module: {
  27.     rules: [
  28.       // 详细loader配置
  29.       // 不同文件必须配置不同loader
  30.       {
  31.         // 匹配哪些文件
  32.         test: /\.(css|less)$/,
  33.         // 使用哪些loader进行处理
  34.         use: [
  35.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  36.           // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
  37.           // 'style-loader',
  38.           // 这个loader取代style-loader 作用：提取js中的css成单独文件
  39.           {
  40.             loader: MiniCssExtractPlugin.loader,
  41.             options: {
  42.               // 设置背景图片的路径
  43.               publicPath: '../'
  44.             }
  45.           },
  46.           // 将css文件整合到js文件中
  47.           'css-loader',
  48.           'less-loader',
  49.           /*
  50.             css兼容性处理：
  51.             postcss --> postcss-loader postcss-preset-env
  52.             帮postcss找到package.json中 browserslist 里面的配置，通过配置加载指定的css兼容性样式
  53.             "browserslist": {
  54.               开发环境：需要设置环境变量 process.env.NODE_ENV = development
  55.               "development":[
  56.                 "last 1 chrome version",
  57.                 "last 1 firefox version",
  58.                 "last 1 safari version"
  59.               ],
  60.               生产环境：默认就是生产环境
  61.               "production":[
  62.                 ">0.2%",
  63.                 "not dead",
  64.                 "not op_mini all"
  65.               ]
  66.             }
  67.             */
  68.            {
  69.              loader: 'postcss-loader',
  70.              options: {
  71.                ident: 'postcss',
  72.                plugins: () => {
  73.                  // postcss的插件
  74.                  require('postcss-preset-env')()
  75.                }
  76.              }
  77.            }
  78.           // 使用loader的默认配置
  79.           // 'postcss-loader',
  80.           // 修改loader的配置
  81.         ]
  82.       },
  83.       {
  84.         // 问题： 默认处理不了html中img图片
  85.         // 处理图片资源
  86.         test: /\.(jpg|png|jpeg|gif)$/,
  87.         // 下载url-loader file-loader (url-loader依赖于file-loader)
  88.         loader: 'url-loader',
  89.         options: {
  90.           // 图片大小小于8kb，就会被base64处理，
  91.           // 优点：减少请求数量（减轻服务器压力）
  92.           // 缺点：图片体积会更大（文件请求速度更慢）
  93.           limit: 8 * 1024,
  94.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
  95.           // 解析时会出问题：[object Module]
  96.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  97.           esModule: false,
  98.           // 给图片进行重命名
  99.           // [hash:10]取图片的hash的前10位
  100.           // [ext]取文件原来扩展名
  101.           name: '[hash:10].[ext]',
  102.           outputPath: 'imgs'
  103.         }
  104.       },
  105.       {
  106.         test: /\.html$/,
  107.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  108.         loader: 'html-loader'
  109.       },
  110.       // 打包其他资源
  111.       {
  112.         // 排除css/js/html资源
  113.         exclude: /\.(css|js|html|less|jpg|png|jpeg|gif)/,
  114.         loader: 'file-loader',
  115.         options: {
  116.           name: '[hash:10].[ext]',
  117.           outputPath: 'media'
  118.         }
  119.       }
  120.     ]
  121.   },
  122.   plugins: [
  123.     // 详细plugins的配置
  124.     // HtmlWebpackPlugin
  125.     // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
  126.     // 需求：需要有结构的HTML文件
  127.     new HtmlWebpackPlugin({
  128.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
  129.       template: './src/index.html'
  130.     }),
  131.     new MiniCssExtractPlugin({
  132.       // 对输出的css文件进行重命名
  133.       filename: 'css/built.css'
  134.     }),
  135.     // 压缩css
  136.     new OptimizeCssAssetsWebpackPlugin()
  137.   ],
  139.   // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新）
  140.   // 特点：只会在内存中编译打包，不会有任何输出
  141.   // 启动devServer指令为：npx webpack-dev-server
  142.   devServer: {
  143.     // 项目构建后的路径
  144.     contentBase: resolve(__dirname, 'build'),
  145.     // 启动gzip压缩
  146.     compress: true,
  147.     // 端口号
  148.     port: 3000,
  149.     // 自动打开浏览器
  150.     open: true
  151.   }
  152. }

语法检查

arbnb可以去github搜一下

/* 
    loader: 1.下载 2.使用
    plugins: 1.下载  2.引用  3.使用
*/
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development'

module.exports = {
  // 模式 development production
  mode: 'development',
  // 入口起点
  entry: './src/js/index.js',
  // 输出
  output: {
    // 输出路径
    // __dirname nodejs的变量, 代表当前文件的目录绝对路径
    path: resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'js/built.js'
  },
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader
      {
        // 匹配哪些文件
        test: /\.(css|less)$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style 标签，将js中的样式资源进行插入，添加到head中生效
          // 'style-loader',
          // 这个loader取代style-loader 作用：提取js中的css成单独文件
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 设置背景图片的路径
              publicPath: '../'
            }
          },
          // 将css文件整合到js文件中
          'css-loader',
          'less-loader',
          /*
            css兼容性处理：
            postcss --> postcss-loader postcss-preset-env
            帮postcss找到package.json中 browserslist 里面的配置，通过配置加载指定的css兼容性样式
            "browserslist": {
              开发环境：需要设置环境变量 process.env.NODE_ENV = development
              "development":[
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              生产环境：默认就是生产环境
              "production":[
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
            */
           {
             loader: 'postcss-loader',
             options: {
               ident: 'postcss',
               plugins: () => {
                 // postcss的插件
                 require('postcss-preset-env')()
               }
             }
           }
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
        ]
      },
      {
        // 问题： 默认处理不了html中img图片
        // 处理图片资源
        test: /\.(jpg|png|jpeg|gif)$/,
        // 下载url-loader file-loader (url-loader依赖于file-loader)
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理，
          // 优点：减少请求数量（减轻服务器压力）
          // 缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024,
          // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入是commonjs
          // 解析时会出问题：[object Module]
          // 解决：关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片进行重命名
          // [hash:10]取图片的hash的前10位
          // [ext]取文件原来扩展名
          name: '[hash:10].[ext]',
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      },
      // 打包其他资源
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less|jpg|png|jpeg|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      },
      /* 
        语法检查：eslint-loader eslint
        注意： 只检查自己写的源代码，第三方库是不用检查的
        设置检查规则：
        package.json中eslintConfig中设置
        "eslintConfig": {
            "extends": "airbnb-base"
        }
        airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
      */
    //   {
    //       test: /\.js$/,
    //       exclude: /node_modules/,
    //       loader: 'eslint-loader',
    //       options: {
    //           fix
    //       }
    //   }
    ]
  },
  plugins: [
    // 详细plugins的配置
    // HtmlWebpackPlugin
    // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
    // 需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],

  // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新）
  // 特点：只会在内存中编译打包，不会有任何输出
  // 启动devServer指令为：npx webpack-dev-server
  devServer: {
    // 项目构建后的路径
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    // 自动打开浏览器
    open: true
  }
}

package.jsoo中

"eslintConfig": {
    "extends": "airbnb-base"
  }

js兼容性处理

安装 babel-loader@8.0.6 @babel/preset-env@7.8.4