webpack4學習總結

webpack4學習記錄

---

webpack中文文檔指南

寫這篇對webpack的基本概念和安裝等簡單操做省略,主要是記錄在跟着官方文檔學習webpack時的一些要點。

---

　　前端寫代碼時，HTML頁面中用<script>標籤引入的一些外部js文件，來支持代碼運行，這些js文件就是項目的「依賴」。webpack就是用了打包管理這些依賴的工具。

• 爲何是npm run build?

  　　
  　　 你用vue-cli的時候，老是用npm run build來打包寫好的代碼，而後代碼很成功的被打包到了dist目錄下。這些都是由於webpack在配置文件webpack.config.js中設置好的。
  　　

const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

　　設置好出口和入口文件的名字位置等，在package.json中添加npm腳本命令build，之後你用npm run build，其實就是執行了webpack。

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },

• 管理非JavaScript文件

　　
　　webpack打包是很厲害,不過它自己只能識別JavaScript文件,對於前端開發中的css,圖片,字體等靜態資源,就須要各類loader來將其轉化爲最終依賴圖能夠引用的模塊。
　　loader須要配置兩個選項：test和use，tset肯定須要loader轉化的文件，use肯定用哪一個loader轉化，在使用以前，外部loader須要npm intsall一下。
　　　　

module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              'style-loader', 
              'css-loader'
            ]
          },
          {
            test: /\.(png|jpg|svg|gif)$/,
            use: [
              'file-loader'
            ]
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
              'file-loader'
            ]
          }
        ]
      }

• 我原來用<script src='xxx.js'>也能夠啊

  　　一個項目中有多個js文件，若是須要在一個js中用到另外一個js的方法，在沒有ES模塊這些東西時，須要把整個js文件引入到html頁面中，並且順序不能出錯，好麻煩的。可是用了webpack，它就能夠本身去根據一個入口js尋找依賴，再配合模塊化的寫法，導入你須要的功能，這樣就能夠方便你們更好的組織代碼。
  

　　　　　　　　　　　　　　不用webpack，目錄結構複雜後會很煩...
　　　　

　　
　　　　　　　　　　　　　　　用了webpack，超清晰!

• 打最乾淨的包！

　　　　開發時每次打包，可能都會有一些棄用的東西，若是要保持打出的dist是最小的包，就使用下面這兩個插件來管理輸出。

const HtmlWebpackPlugin = require('html-webpack-plugin')
        const CleanWebpckPlugin = require('clean-webpack-plugin')
        module.exports = {
          entry: {
            app: './src/index.js',
            print: './src/print.js'
          },
          plugins: [
            new CleanWebpckPlugin(['dist']),
            new HtmlWebpackPlugin({
              title: 'Output Management'
            })
          ],