webpack打包工具深入浅出基础配置总结weixin48179599的博客-

概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

官网直通车

基础配置

模式 mode
入口 entry
出口 output
插件 plugins （loader插件）

loader插件

• 处理css
  css-loader 分析css关系，需要加载哪些css文件
  style-loader 把css插入到html>head标签里里面
  mini-css-extract-plugin 抽取css为单独文件
  optimize-css-assets-webpack-plugin 压缩css
  less 处理less文件
  less-loader 加载less文件

配置实例：

//导入处理html插件 const htmlWebpackPlugin = require("html-webpack-plugin") //压缩、抽取css为单独文件 const minCssExtractPlugin = require("mini-css-extract-plugin") //压缩css const optimizeCss = require("optimize-css-assets-webpack-plugin") //导出配置文件 module.exports = { //定义入口文件     entry:"./src/index.js", //定义出口文件     output:{ //文件名         filename:"main.js", //查询路径         path:__dirname+"/dist" },     plugins:[ //创建一个html处理插件 new htmlWebpackPlugin({ //压缩             minify:true, //标题             title:"我的第一个webpack", //模板             template:__dirname+"/public/index.html" }), //抽取css  生成style.css文件 new minCssExtractPlugin({             filename:"style.css" }), ],     optimization:{ //css、js压缩器         minimizer:[ new optimizeCss() , new UglifyjsWebpackPlugin], },     module:{ //规则 //不同文件的处理插件不同         rules:[ {                 test:/.css$/, //从右至左依次执行                 use:["style-loader","css-loader"] }, {                 test:/.less$/, //从右至左依次执行                 use:[minCssExtractPlugin.loader,"css-loader","less-loader"] }, ] },     resolve:{ //别名         alias:{ "@":path.resolve(__dirname,"./src") } } }