webpack的基本配置

1. 初始化專案 npm init

2. 建立各類需要打包的檔案，**html、css、js **等

3. 建立 webpack.config.js 配置檔案，其中有5大基本配置

   1. entry 入口檔案，一般會引用 node 模組中的 path 來查詢檔案的路徑，當需要配置多入口檔案時，entry 需要以物件的形式存在，每一個入口名對應為一個 chunks 口，當模組需要使用不同的入口檔案時需對應 chunks 。

      entry: {
              main: ["@babel/polyfill", path.resolve(__dirname, '../src/index.js')],    // 入口檔案
              hearder: path.resolve(__dirname,'../src/hearder.js')
      }
      plugins:[
            new HtmlWebpackPlugin({
              template:path.resolve(__dirname,'../public/index.html'),
              filename:'dist-index.html',
              chunks:['main'] // 與入口檔案對應的模組名
            }),
            new HtmlWebpackPlugin({
              template:path.resolve(__dirname,'../public/hearder.html'),
              filename:'hearder.html',
              chunks:['hearder'] // 與入口檔案對應的模組名
            })
      ]
       
      

   2. 出口檔案 output

      output: {
        filename: 'build.js',  // 可以自定義打包後的檔名
        path: Path.resolve(__dirname, './dist')  // 打包後的檔案輸出位置
      }
      

   3. Module 打包配置

      • 解析 html 文件時，需要使用 html-loader 載入器，並且這個載入器使用的規範是 es6 規範，而 webpack 使用的是 CMD，所以需要在配置中關閉 es6 規範。否則會出錯。

      • 解析 CSS 資源時，需要引入相應的載入器解析。

      • 解析 CSS 資源中的圖片時，需要用到 url-loader 載入器，url-loader

        載入器依賴於 file-loader 載入器。

        module: {
          rules: [
            // 解析 html 文件
            {
              test: /\.html$/,
              loader: 'html-loader',
              options: {
                esModule: false  // 關閉es6模組化規範
              }
            },
            // 解析 sass 樣式
            {
              test: /\.s[ac]ss$/,
              use: ['style-loader', 'css-loader', 'sass-loader'] // 從右向左順序解析
            },
            // 解析圖片資源
            {
              test: /\.(png|svg|jpg|gif)$/,
              loader: 'url-loader',
              options: {
                limit: 4 * 1024,
                esModule: false,
                name: 'image/[hash:10].[ext]' // 對打包後的圖片資源改名並存放於新建的image資料夾下
              }
            }
          ]
        }
         
        

   4. mode 開發模式

      mode: 'development' // 開發模式
      mode: 'production'  // 生產模式
      

   5. 外掛 Plugin 以陣列形式存在，用到的外掛需要在此配置下新建例項

      plugins: [
        new HtmlWebpackPlugin({
          template: Path.resolve(__dirname, './src/index.html'), 
          filename: 'index_build.html'
        })
      ]