阅读 117

webpack4学习(1),基础配置

五大模块

  • entry
  • output
  • module
  • plugin
  • mode
// npm i webpack webpack-cli
const { resolve } = require('path');
module.exports={
    entry:['./src/index.js'],
    output:{
    	filename:'bundle.js',
        path:resolve(__dirname,'dist')
    },
    module:{
    	rules:[]
    },
    plugins:[],
    mode:'development' //production
}
复制代码

解析文件分类

样式文件、js、html、图片

样式

  • 解析cssless
// npm i style-loader css-loader less less-loader
module.exports={
    module:{
    	rules:[
            {
            	test:/\.css$/,
                use:[ //loader倒序执行
                  'style-loader', //创建style标签,将js中的样式资源插入到head中
                  'css-loader' //将css文件变成commonjs模块加载到js中,里面是样式字符串
                ]
            },
            {
            	test:/\.less$/,
                use:[
                  'style-loader', 
                  'css-loader', 
                  'less-loader' //将less文件编译成csss文件,还需安装less包
                ]
            }
        ]
    },
}
复制代码
  • 样式兼容postcss
module.exports={
	//npm i postcss-loader postcss-preset-env(插件)
    module:{
    	rules:[
            {
            	test:/\.css$/,
                use:[ //loader倒序执行
                  'style-loader', //创建style标签,将js中的样式资源插入到head中
                  {
                     loader:'postcss-loader',
                     options:{
                     	ident:'postcss',
                        /*
                          postcss-preset-env帮助postcss读取package.json中browserslist的配置
                          browserslist浏览器的指定兼容性配置
                        */
                        plugins:()=>[require('postcss-preset-env')()]
                     }
                  },
                  'css-loader' //将css文件变成commonjs模块加载到js中,里面是样式字符串
                ]
            }
        ]
    },
}
复制代码

package.json

{
  "browserslist":{
      /*
      开发环境:->设置node环境变量
      设置node环境变量
      webpack.config.js process.env.NODE_ENV = 'development';
      */
      "development":[
        "last 1 chrome version" //兼容最近的一个浏览器版本
        "last 1 firefox version"
      ],
      // 默认生产环境
      "production":[
        ">0.2%", //大于99.8浏览器
        "not dead", //不兼容已死的浏览器
        "not op_mini all" //不兼容欧朋
      ]
    }
}
复制代码
  • 提取css为单独文件 插件mini-css-extract-plugin
// npm i mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
    module:{
    	rules:[
            {
            	test:/\.css$/,
                use:[
                   {
                   /*
                     这个loader将取代style-loader,提取js中的css文件,
                     开发配置需要使用style-loader配置devServer hot实现样式热更新
                   */
                     loader: MiniCssExtractPlugin.loader, 
                    // 修改loader的默认配置
                     options: {
                       // 对页面引入资源的路径做对应的补全
                       publicPath: '../',
                     },
                  },
                  {
                     loader:'postcss-loader',
                     options:{
                     	ident:'postcss',
                        plugins:()=>[require('postcss-preset-env')()]
                     }
                  },
                  'css-loader'
                ]
            }
        ]
    },
    plugins:[
      new MiniCssExtractPlugin({
        // 文件重命名
        filename: 'css/main.css',
      })
    ]
}
复制代码

js

webpack本身可以处理js文件,需要做的是兼容性处理

  • 基础兼容性
// 需安装的包 npm i babel-loader @babel/core @babel/preset-env
module.exports={
    module:{
    	rules:[
            {
            	test:/\.js$/,
                loader:'babel-loader',
                options:{
                  exclude:/node_modules/,
                 // 所需要兼容的浏览器package.json browserslist
                // 预设:指示babel做怎样的兼容处理
                  presets:["@babel/preset-env"]
                }
            }
        ]
    },
}
复制代码
  • 浏览器并不支持的原生API的代码兼容性处理
    • 方法一
      //需安装的包 npm i @babel/polyfill
      只需在公共的js页面引入 babel/polyfill
      import 'babel/polyfill'
      缺点全部的兼容方法都会被引入,会增加文件体积
      复制代码
    • 方法二 按需导入
      // 需安装 npm i core-js
      module.exports={
          module:{
              rules:[
                  {
                      test:/\.js$/,
                      loader:'babel-loader',
                      options:{
                        exclude:/node_modules/,
                        presets:[
                        [
                        "@babel/preset-env",
                         {
                           useBuiltIns:'usage', //按需加载
                           corejs:{version:3}, //指定core-js的版本
                           targets:{ //指定浏览器兼容的版本
                             chrome:'60',
                             firefox:'60',
                             ie:'9'
                           }
                         }
                         ]
                        ]
                      }
                  }
              ]
          },
      }
      复制代码
  • 压缩css
// npm i optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
  pliguns:[new OptimizeCssAssetsWebpackPlugin()]
}
复制代码

html模板

// npm i html-webpack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
  plugins:[
    new htmlWebpackPlugin({
       // 复制模板文件,创建html并自动引入输出的文件
      tempalte:'./index.html',
      //压缩代码
      minfy:{
        collapseWhitespace:true,//移除空格
        removeComments:true,//移除注释
      }
    })
  ]
}

复制代码

图片

// npm i url-loader file-loader
module.exports={
  module:{
    rules:[
      {
        test:/\.(jpg|png|gif)$/,
        //url-loader依赖file-loader
        loader:'url-loader',
        options:{
          /*
           图片小于8kb,转base64合在js中
           优点:减少请求数
           缺点:图片体积变大,文件请求速度变慢
          */
          limit: 8*1024,
          //重名
          name:'[hash:10].[ext]',
          //输出路径
          outputPath:'imags'
        }
      }
    ]
  }
}
复制代码

devSearver

/*
 npm i webpack-dev-server
 构建后在内存中
 启用 npx webpack-dev-server
*/
module.exports={
  devServer:{
    // 项目构建后路径
    constBase:resolve(__dirname,'dist'),
    port:3030,
    // 开启压缩
    compress:true,
    //自动打开浏览器
    open:true,
    /*
      开启HMR功能(热更新)
      样式文件 style-loader实现HMR
      js文件默认不使用HMR
    */
    hot:true
  }
}
复制代码
文章分类
前端
文章标签