概念和安裝

• 安裝

  npm init demo//創(chuàng)建一個項目
  cd demo
  npm install -D webpack webpack-cli
  

  創(chuàng)建一個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文件引用的圖片等引用資源，在打包后，打包文件換了目錄，資源會找不到，加上這個打包的文件就會加上這個路徑去找靜態(tài)資源
    

• loader

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

• plugins插件

  • 插件的用途比loader更廣，從打包，壓縮文件到幫助開發(fā)等

• mode

  • development（）開發(fā)模式 production（生產模式）