webpack基础

webpack基础

• 设置webpack模式的几种方法

  1. npx webpack --mode=development (mode的优先级高于env)
  2. npx webpack --env=development

  // webpack.config.js
  module.exports = (env) => {
       
    return {
       
      mode: env
      //....
    }
  }
  

  以上两种方式只会影响模块内的环境变量(也不会影响plugin、loader内的环境变量)
  3. npx cross-env NODE_ENV=development webpack
  cross-env用于设置环境变量(兼容windows和mac)
  这种方式是设置当前node的环境变量

• 执行webpack打包

  // 1. 使用默认配置
  // npm install webpack webpack-cli -D
  // npx webpack
  
  
  // 2. 自定义配置(webpack.config.js)
  const path = require('path')
  module.exports = {
       
    mode: 'development',
    entry: './src/index.js',
    output: {
       
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'build') // 必须是绝对路径
    }
  }
  // npx webpack --config webpack.config.js
  

• webpack创建静态服务 – webpack-dev-server

  // npm install webpack-dev-server -D
  // 在webpack.config.js中配置devServer
  // 开发服务器的配置  -- 使用的是内存中打包后的文件
  const devServer = {
       
    port: 3000,
    static: {
         // webpack5使用static，不再使用contentBase
      directory: path.join(__dirname, 'build')  // 静态文件目录(如果你还有一些没有参与打包的静态文件也需要作为开发服务器的资源被访问，那你就需要额外通过配置“告诉” webpack-dev-server)
    },
    open: true, // 自动打开页面
    compress: true // 启用gzip压缩
  }
  

• 将js文件引入模板html – html-webpack-plugin

  plugins = [
    // 把打包后的js文件引入模板html
    new HtmlWebpackPlugin({
       
      template: path.resolve(__dirname, 'src/index.html'),
      filename: 'index.html',
      minify: {
       
        collapseWhitespace: true, // 去掉换行
        removeAttributeQuotes: true // 删除双引号
      },
      hash: true
    })
  ]
  

• 解析less – less-loader
  解析css – css-loader (解析@import语法)
  生成style标签插入模板 – style-loader

  module = {
       
    rules: [
      {
       
        test: /\.css$/,
        use: [
          {
       
            loader: 'style-loader',
            options: {
       
              insertAt: 'top'
            }
          },
          'css-loader'
        ]
      },
      {
       
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
  

• 提取css，用link标签引入 – mini-css-extract-plugin

  module = {
       
    rules: [
      {
       
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // 使用loader
          'css-loader'
        ]
      }
    ]
  }
  plugins = [
    new MiniCssExtractPlugin({
       
      filename: 'css/main.css'  // 输出路径
    })
  ]
  

• postcss autoprefixer – 给css3样式添加前缀

  module = {
       
    rules: [
      {
       
        test: /\.less/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
          'postcss-loader'
        ]
      }
    ]
  }
  
  // 添加postcss.config.js文件   postcss插件会读取这个文件
  module.exports = {
       
    plugins: [
      require('autoprefixer')({
       
        overrideBrowserslist: