webpack基本配置

目录

• webpack是什么
• webpack安装/初始化配置
• webpack配置文件
• HTML配置
• CSS配置
• js配置
• 图片处理
• 其他资源
• devServer自动打包编译
• 开发环境配置
• 生产环境配置

webpack是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。所有的构建工具都是基于node.js平台运行，模块化默认采用commonjs。

webpack安装/初始化配置

1.安装webpack

（-D 安装开发依赖）
2.初始化package.json
npm init

webpack配置文件

1、webpack可以处理js，json文件，不能处理其他文件
2、生产环境比开发环境多一个压缩js代码
3、生产环境和开发环境可将ES6模块编译成浏览器能识别的模块

/*webpack.config.js*/

//resolve用来拼接绝对路径的方法
const {resolve} = require('path');

module.exports = {
	entry: './src/js/index.js',  //入口文件，webpack从这里开始打包
	output: {
	filename: 'build.js',  //输出文件名
	path: resolve(__dirname, 'build')  //输出路径，一般采用绝对路径
	//__dirname nodejs的变量，代表当前文件目录的绝对路径
	},
	//loader处理那些非JavaScript文件
	module: {
		rules:[
		//详细loader配置，不同文件配置不同loader
		]
	},
	plugins: [
	//插件，执行更大更复杂的任务
	],
	//打包模式
	mode: 'development'  //development:开发环境，production:生产环境
 

HTML配置

/* 
loader:1、下载 2、使用（配置loader）
plugins：1、下载 2、引入 3、使用
*/
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'build.js',
    path:resolve(__dirname, 'build')
  },
  module:{
    rules:[

    ]
  },
  plugins:[
    //html-webpack-plugin
    //功能：默认创建一个空的HTML，自动引入打包输出的所有资源（JS/Css）
    //需求：需要有结构的HTML文件
    new HtmlWebpackPlugin({
      // 复制./src/index.html文件，并自动引入打包输出的所有资源
      template: './src/index.html',
      // 压缩html
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }
      )
  ],
  mode: 'development'
}

CSS配置

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')


// 复用loader
/*css兼容性处理：postcss-->postcss-loader postcss-preset-env
   (package.josn)
   "browserslist": {
   //开发环境-->设置node环境变量：process.env.NODE_ENV = development
    "development": [
      "last 1 chrome version",  兼容最近版本的浏览器
      "last 1 firefox version",
      "last 1 safari version"
    ],
    //生产环境，默认看生产环境
    "production": [
      ">0.2%", 兼容99.8%的浏览器
      "not dead",  不要已死的浏览器
      "not op_mini all"  不要op_mini
     ]
   }
帮postcss找到package.josn中browserslist里面的配置，通过配置加载指定的css兼容性格式 
*/
// 使用loader的默认配置 ‘postcss-loader’
const commonCssLoader = [
  MiniCssExtractPlugin.loader,//取代style-loader，提取js中的css成单独文件
  'css-loader', //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
  {
    // 还需在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => {
        require('postcss-preset-env')();
      },
    },
  },
]

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          // use数组中执行顺序：从右到左、从下到上依次执行
          // 'style-loader',创建style标签，将js中的样式资源插入进行，添加到head中生效
          ...commonCssLoader
        ],
      },
      {
        test: /.less$/,
        use: [
          ...commonCssLoader,
          'less-loader',// 将less文件编译成css文件
        ],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/build.css',
    }),
    new OptimizeCssAssetsWebpackPlugin(),// 压缩css
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
}

js配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      /*
        语法检查： eslint-loader eslint
        只检查自己写的源代码，不检查第三方库
        设置检查规则：
          package.josn中 eslintConfig中设置
          推荐使用airbnb规则
      */
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复
          fix: true,
        },
      },
       /* 
      js兼容性处理：babel-loader @babel/preset-env @babel/core
        1.基本js兼容性处理 --> @babel/preset-env 
        问题：只能转换基本语法，promise等高级语法无法转换
        2.全部js兼容性处理  --> @babel/polyfill 文件中导入即可
        问题：只需解决部分兼容性问题。但是将所有兼容性代码全部引入，体积过大
        3、需要做兼容性处理就做：按需加载 --> core-js
     */
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
        // 预设：指示babel做怎样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets:{
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  edge: '17',
                  safari: '10'
                }
              }
            ]
          ],
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'production', // 生产环境下会自动压缩js代码
};

图片处理

const HtmlWebpackPlugon = require('html-webpack-plugin')

module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'build.js',
    path:`${__dirname}/build`
  },
  module:{
    rules:[
      {
        test:/.less$/,
        //使用多个loader用use
        use:[
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },{
        //处理图片资源
        // 问题：默认处理不了HTML中img图片
        test: /.(jpg|png|gif)$/,
        // 使用一个loader
        // 下载url-loader file-loader
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb，就会被base64处理
          // 优点：减少请求数量（减轻服务器压力）
          // 缺点：图片体积会变大（文件请求速度更慢）
          limit: 8 * 1024,
          // esModule:false 关闭es6模块化，使用commonjs解析

          // 给图片进行重命名
          // [hash：10]：取图片的hash的前十位
          // [ext]取文件原来的扩展名
          name:'[hash:10].[ext]'
        }
      },
      {
        test:/.html$/,
        // 处理HTML文件的img图片（负责引入img，从而能被url-loader处理）
        loader:'html-loader'
      }
      
    ]
  },
  plugins:[
    new HtmlWebpackPlugon({
      template:'./src/index.html'
    })
  ],
  mode:'development'
}

其他资源

const { resolve } = require('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path:  resolve( __dirname, 'build' )
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      //打包其他资源(除了html/css/js以外的资源)
      {
        // 排除html/css/js资源
        exclude:/.(css|js|html|jpg|png|gif)$/,//url-loader也可以用
        loader:'file-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
}

devServer自动打包编译

const { resolve } = require('path');
const HtmlWebpackPlugin = require ('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path:  resolve( __dirname, 'build' )
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      //打包其他资源(除了html/css/js以外的资源)
      {
        // 排除html/css/js资源
        exclude:/.(css|js|html)$/,//url-loader也可以用
        loader:'file-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',

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

开发环境配置

/* 
开发环境配置：代码可运行
运行指令：
  webpack  会将打包结果输出
  npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry:'./src/index.js',
  output: {
    filename: 'build.js',
    path: resolve(__dirname, 'build')
  },
  module:{
    rules: [
      {
        test: /.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test:/.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test:/.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          linit: 8*1024,
          name:'[hash:10].[ext]',
          exModule: false//关闭es6模块化
        },
         // outputPath:'img' 输出到build/img文件夹
      },
      {
        //处理html中的img
        test: /.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /.(html|css|js|jpg|png|gif|less)$/,
        loader:'file-loader',
        options: {
          name:'[hash:10].[ext]'
        }
      }
    ]
  },
  plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html'
      })
    ],
    mode: 'development',
    devServer: {
      contentBase: resolve(__dirname, 'build'),
      compress: true, //优化
      port: 3000,
      open: true
    },
}

生产环境配置

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义node环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader', {
    // 还需在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => {
        require('postcss-preset-env')();
      },
    },
  },
]

/* 
正常来讲，一个文件只能被一个loader处理
当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  先执行eslint再执行babel
*/
module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          ...commonCssLoader
        ],
      },
      {
        test: /.less$/,
        use: [
          ...commonCssLoader,
          'less-loader',
        ],
      },
      {
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        // 在package.josn中eslintConfig --> airbnb
        test: /.js$/,
        exclude: /node_module/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                targets: {
                  chrome: '60',
                  firefox: '50',
                },
              },
            ],
          ],
        }
      },
      {
        test: /.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          esModule: false
        }
      },
      {
        test: /.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /.(js|css|less|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'media'
        }
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/build.css',
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};

【此文为 尚硅谷2020最新版Webpack5实战教程(从入门到精通) 笔记】