webpack概念

概念和安装

• 安装

  npm init demo//创建一个项目
  cd demo
  npm install -D webpack webpack-cli
  

  创建一个webpack.config.js文件，webpack配置可以写在其中

  const path = require('path')
  module.exports = {
      mode:'development',
      module:{
          rules:[
                    
          ]
      },
      entry:{
          main:'./src/index.js'
      },
      output:{
          filename:'index.js',
          path:path.resolve(__dirname,'./dist')
      },
      plugins:[
          
      ]
  }
  

  在package.json添加

   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "webpack": "webpack"
    },//npm run webpack 可打包文件
  

• 概念

  • entry入口

    • webpack会从哪个文件开始为入口

      • 多入口可以写成

      •   entry:{
                lodash:"./src/fun.js",
                main:'./src/index.js'
            },
              output:{
                filename:'[name].js',
                path:path.resolve(__dirname,'dist')
            },
        

• output出口

  • 当webpack打包过文件后输出到哪，如何输出

  • publicPath:'src/asserts'  //如果打包的js文件引用的图片等引用资源，在打包后，打包文件换了目录，资源会找不到，加上这个打包的文件就会加上这个路径去找静态资源
    

• loader

  • webpack只知道处理js文件 loader告诉webpa查看如何处理其他文件

• plugins插件

  • 插件的用途比loader更广，从打包，压缩文件到帮助开发等

• mode

  • development（）开发模式 production（生产模式）