webpack打包

一.对代码进行打包

//npx webpack 对代码进行打包
在package.json进行配置
"scipts":{
	"bundle":"webpack" //先到工程命令的webpack中查找
}
//npm run bundle 对代码进行打包

打包提示：

hash：对应的唯一id值
version：webpack版本
time：时间    builta	at：日期
asset ：打包的文字	size：大小	chunks：打包文件的id	
chunk names：文字的name	是config配置entry的main的简写
enterypoint main ：打包入口

二.图片打包

默认打包js文件，需要再配置文件进行进一步配置

module:{
	rules:[{
    test:/\.(jpg|png|gif)$/, //以jpg结尾的图片进行打包
      use:{
        loader:'url-loader',//file-loader
        options:{ //配置项
          //placeholers  占位符 ext原始文件的后缀 hash 哈希值
          name:“[name].[ext]”, //打包后的文件和原图片名称后缀一致
          outputPath:"imges/", //打包至dist/images文件夹下
          limit:2048 //判断图片大小，大于2048字节打包到单独文件夹，小于则直接打开到js内
        }
    }，
    test:/\.css$/, //以jpg结尾的图片进行打包
      use:["style-loader",""]
	}
]
}

下载loader ：npm i file-loder -D

打包的方案，他知道webpack该如何打包一些文件，webpack不识别非js结尾的文件，需要设置loader

三.loader打包样式

module:{
	rules:[{
    test:/\.(eot|ttf|svg)$/, //以jpg结尾的图片进行打包
      use:{
        loader:'file-loader',//file-loader
      }
    }，
    test:/\.css|scss$/, //以jpg结尾的图片进行打包
      use:["style-loader",
           {
             loader:"css-loader",//对"css-loader"进行属性配置
             options:{
               importLoaders:2, //不同位置imprt引入的loader依次从上而下执行所有的loader
						}
           }
           "sass-loader",
           "postcss-loader,"
          ] //从上到下，从右到左的执行顺序
	}]
}
//自动添加厂商前缀,在目录下设置postcss.config.js文件,安装autopredixer插件
module.exports = {
plugins:[
  require("autoprefixer") //自动添加-webkit-transform
]}

安装 style-loader css-loader sass-loader node-sass postcss-loader,安装好打包css文件，webpack默认不打包css文件，css-loader分析出几个css文件之间的关系，合并为一个，获取合并的css，style-loader挂载到header，使用sass-loader打包识别scss文件,postcss-loader添加前缀

四.webpack打包字体文字

借助iconfont图标库

iconfont.css代码， .icon .icon-changjingguanli 场景管理的类
module:{
	rules:[{
    test:/\.css|scss$/, //以jpg结尾的图片进行打包
      use:["style-loader",
           {
             loader:"css-loader",//对"css-loader"进行属性配置
             options:{
               importLoaders:2, //不同位置imprt引入的loader依次从上而下执行所有的loader
               modules:true,//将css只在当前模块有效
						}
           }
           "sass-loader",
           "postcss-loader,"
          ] //从上到下，从右到左的执行顺序
	}]
},

五.使用plugins让打包更便捷

下载 ：npm i html-webpck-plugin -D ， npm i clean-webpack-plugin -D

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

module.export:{
  plugins:[ //可以在webpack运行在某个时刻时自动做某些事情，类似生命周期
    new HtmlWebpackPlugin({//打包结束后自动生成html，打包生成的js文件引入打包的文件
      template:"src/index.js",//创建html模板，以这个html为模板在生成html，引入打包的js文件
    }),
    new CleanWebpackPlugin(["dist"]) //打包运行前删除原dist文件夹内容
  ]
}