webpack

webpack的安装
为了防止全局安装出现的版本冲突，我们一般都把webpack安装在本地项目中
npm i webpack webpack-cli --save-dev

从npm5.2版本后，提供了一个命令：npx，基于这个命令可以执行本地安装的模块
$npx webpack 基于npx执行了webpack命令，而这个命令就是实现打包部署的
-找到node_modules/.bin
-要求我们得有webpack.cmd文件
-执行webpack.cmd
也可以从package.json中配置可执行的脚本

'scripts':{
  'build':'webpack',
  ....
}

$ npm run build OR yarn build

在webpack.config.js这个文件中设置我们自定义的打包规则
1.所有的规则都写在module.exports={}中

module.exports={
//配置优化规则
optimization:{
  //压缩优化
  minimizer:[
       
    ]
}
 mode:''  //配置环境 production development
  entry:'./src/index.js'  //入口文件，从哪个文件开始打包
  //出口
  output:{
  filename:'bundle.min.js'  //输出的文件名
  //让每一次生成的文件名都带着HASH值
  filename:'bundle.min.[hash].js'  //输出的文件名
  path:''   //输出的目录必须是绝对路径
},
  //关于webpack-dev-server的一些配置
 devServer:{
   port:3000, //创建服务指定的端口号
   progress:true //显示打包编译的进度
  contentBase:'./build'  //指定当前服务处理资源的目录
  open:true  //编译完会自动打开浏览器
}，
 //使用插件（数组）
  plugins:[
    new HtmlWwbpackPlugin({
       //不指定模板会按照默认模板创建一个HTMl页面，当然真实项目中一般都市把自己写好的HTML进行编译
       template:'./src/index.html',
      //输出的文件名
      filename:'index.html',
      //让我们引入JS后面加上HASH（清除缓存），但是真实项目中我们一般都市每一次编译生成不同的JS文件引入
     hash:true，
     //控制压缩
     minify:{
     
}
})
]，
  //使用css加载器loader处理规则
  module:{
   rules:[
  {
   test:/\.css$/,  //基于正则匹配处理哪些文件
  //控制使用的LOADER(有顺序的：从右到左执行，先执行css再style)
   use:[
    'style-loader',  //把编译好的css插入到页面的HEAD中
    'css-loader',  //编译@import/url()这种语法的
],  //控制使用的加载器
   }，
   {
    test:/\.js$/i,
    // 编译JS
    use:[{
     loader:'babel-loader',
     options:{
      //基于BABEL的语法解析包（ES6编译ES5）
       presets:[
        '@babel/preset-env'
     ]
     }
    }]
  }
]
}
}

图片

{
  test:/\.(png|jpg|jpeg)$/i,
  use:['file-loader']
},
{
  test:/\.(html|htm|xml)$/i,
  use:['html-withimg-loader']
}