webpack配置项简述

webpack模块打包机

环境

	mode:'development' | 'production' 

webpack4-5直接使用生产环境会默认开启treestrek,处理js,json文件

入口

	entry:'./src/index.js'	// 入口文件

出口

	output:{
		filename:'built.js',
		path:resolve(__dirname,'build')
	}
	// 也可以批量配置出口

loader

	module:{
		rules:[
			// 详细的loader配置
			test:\.js$\,
			use:[
				// 执行顺序,从右到左,从下到上
				
			]
		]
	}

处理js的loader
	js		babel-loader
处理css的loader
	scss	css-loader	sass-loader	
	less	css-loader	less-loader
	css		css-loader	style-loader
处理图片的loader
	统一使用  url-loader	
			image-webpack-loader(压缩图片配置的loader)
处理字体的loader
	统一使用  file-loader
处理tpl的loader
	tpl		ejs-compiled-loader

plugin

const CleanCSS = require("clean-css");
// 清除css

const UglifyJsPlugin  = require('uglifyjs-webpack-plugin')
webpack3需要使用该插件,4-5自动开启
	plugins.push(
        new webpack.optimize.UglifyJsPlugin({
          //压缩代码
          compress: {
            warnings: false,
          },
        })
  );

文件拷贝

公共文件或者是项目中使用的插件使用拷贝

const CopyWebpackPlugin = require("copy-webpack-plugin");

var copyDir = ["img", "lib"],
copyConfig = [];
copyDir.forEach((dir) => {
  // 当循环文件的时候自动创建img下对应的图片文件夹
  copyConfig.push({
    from: `./src/${dir}`,
    to: path.resolve(__dirname + config.getPublicPath()) + "/" + dir,
    ignore: ["**/.*/**/*", "*.scss"],
    transform: function (content) {
      if (dir !== "css") return content;
      return new CleanCSS({}).minify(content).styles; //压缩css文件
    },
  });
});

plugins.push(
  //文件copy插件
  new CopyWebpackPlugin(copyConfig)
);

css文件抽离(已被弃用,使用mini-css-extract-plugin)

将js中的css文件进行抽离到独立文件输出

style-loader、css-loader 需要配合两项loader使用
const ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins.push(new ExtractTextPlugin("css/[name].css"));


  	{
        test: /\.(sa|sc|c)ss/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          // publicPath: "../img/",
          use: ["css-loader", "sass-loader"],
        }),
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          //分离less编译后的css文件
          fallback: "style-loader",
          use: ["css-loader", "less-loader"],
        }),
      },

处理兼容css loader

cnpm i postcss-loader postcss-preset-env -D

压缩css插件

cnpm i optimize-css-assets-webpack-plugin -D


 new OptimizeCssAssetsWebpackPlugin()

压缩html

cnpm i html-webpack-plugin -D

plugins:[
	new HtmlWebpackPlugin({
		template:'./src/index.html',
		minify:{
			// 移除空格
			collapseWhitespace:true,
			// 移除注释
			removeComments:true
		}
	})
]

多出口打包文件

对于生产出的文件进行分类

const HtmlWebpackPlugin = require("html-webpack-plugin");

// htmlpages 为一个html文件目录
HtmlPages.forEach((page) => {
  // 生成html文件
  plugins.push(
    new HtmlWebpackPlugin({
      //根据模板插入css/js等生成最终HTML
      static: {
        meta: metatpl,
        header: headertpl,
        footer: footertpl,
        js: jstpl,
      },
      filename: `./${page}.html`, //生成的html存放路径，相对于 path
      template: `./src/${page}.ejs`, //html模板路径
      favicon: "./favicon.ico",
      hash: true,
      minify: {                   // 是否开启压缩false为不压缩
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
      },
      chunks: [page],             // 为不同的页面注入不同的chunk
      excludeChunks: ["print", "report"], //不包含打印入口文件
    })
  );
  entryConfig[page] = `./src/js/${page}.js`;
});

打包更新文件

删除旧文件,生产新文件,直接插件中实例化使用即可

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

plugin.push(new CleanWebpackPlugin())