webpack打包基础

1.介绍

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

2.Webpack 究竟是什么

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

3.webpack安装

• 全局安装：(不推荐)

npm install wenpack webpack-cli -g

// 检测webpack

webpack -v

//卸载webpack

npm uninstall webpack 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

4.对代码进行打包

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

5.图片打包

下载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",""]
}
]
}

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

6.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
]}