webpack打包流程

介绍

webpack帮助我们管理复杂项目的工具
类似的工具：grunt，gulp，browserigy
vue，React，Angular 这些框架都用到了webpack
webpack4：速速更快，在大型项目中节约了90%的构建时间，内置了更多的默认选项，变革了许多API

Webpack 究竟是什么

webpack是一个模块打包工具
可以识别CommonJS，CMD , AMD

webpack安装

全局安装：(不推荐)

npm install wenpack webpack-cli -g

检测webpack

webpack -v

局部安装：

npm install webpack webpack-cli -D

/检测webpack(不会检测到，只会检测全局)

webpack    -v

// 检测webpack

npx   webpack    -v

安装不同的webpack版本： // 检webpack所有版本

npm    info   webpack

//安装指定版本的webpack

npm    install   webpack@4.16.5      webpack-cli     -D

对代码进行打包

 //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 ：打包入口

图片打包

下载loader ：npm i file-loder -D

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打包样式

安装 style-loader css-loader sass-loader node-sass postcss-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
]}