webpack從零開始第2課: 配置文件

webpack目錄

• 第1課: 安裝webpack和webpack-dev-server
• 第2課: 配置文件
• 第3課: 作爲node的一個模塊來使用
• 第4課: 插件篇
• 第5課: 模塊篇
• 第6課: 在Vue開發中使用webpack

---

本課參考資料

• 官方配置部分詳解

---

一：新建配置文件

1.配置文件名

默認爲webpack.config.js，能夠爲其它名字，但這時啓動webpack要加參數--config來指定配置文件，如 webpack --config abc.config.js

2.配置文件目錄

默認爲項目根目錄，通常會放到./build文件夾下

提示: 當配置文件在根目錄下，且配置文件名爲 webpack.config.js，這兩個條件都知足時，能夠省略--config參數來啓動webpack或wepack dev server

3.配置文件格式

1. 最終輸出一個對象 module.exports={...} ，這種最經常使用
2. 最終輸出一個函數
3. 最終輸出一個Promise
4. 最終輸出多項配置

3.1 第1種：輸出爲一個對象

格式爲

module.exports={...}

這個最經常使用，下面會就對象中的各個部分詳細講解

3.2 第2種：輸出爲一個函數

參考: https://webpack.js.org/config...

module.exports = function(env,arg){
  return {
    ...
  }
}

說明1. 返回值必須是一個對象
說明2. 函數有2個參數分別爲 env和 arg,env爲執行webpack時帶入的，如 D:\03www2018\study\webpack2017>webpack --env prod，這時的env值就爲prod，若是沒有帶參數--env，那麼函數中獲得的env爲undefined。webpack命令行時可用的參數一共有94個，除了--env外的93個都放在第二個參數arg中了，它是一個對象，若是執行webpack命令時沒有指定其它參數，那麼它的值就是webpack給它的默認值
說明3：參數--env的格式與在webpack.config.js中輸出函數中env參數之間的關係

說明4: 若是參數不在webpack的默認範圍內，如 webpack --wang=haha --env=prod會報錯 Unknown argument: wang
說明5:
如 根目錄>webpack --progress true --watch true --env prod，這樣獲得的參數env的值爲pro，參數arg的值爲

{ 
  ...
  watch: true,
  ...
  progress: true,
  ... 
}

3.3 第3種：輸出爲一個Promise

參考官方文檔 https://webpack.js.org/config...

當須要異步加載配置文件時，得將配置文件輸出爲一個Promise,如

module.exports = ()=>{
    return new Promise((resolved,rejected)=>{
        settimeout(()=>{
            resolve({
                entry: './app.js',
                /* ... */
            })
        },5000)
    })
}

3.4 第4種：輸出多個配置

格式爲

module.exports=[{第一個配置對象},{第二個配置對象}]

二：各項配置重點講解

完整結構以下

module.exports = {
  entry: "...", 
  output: {... },
  module: {
    rules: [
      {...},
      {...},      
    ],
  },
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
    alias: {...},
  },
  performance: {...  },
  devtool: "source-map", 
  context: __dirname, 
  target: "web", 
  externals: ["react", /^@angular\//],
  stats: "errors-only",
  devServer: { ...  },
  plugins: [   ...  ],
}

2.1 入口文件和上下文 entry & context

module.exports = {
    // 上下文是查找入口文件的基本目錄，是一個絕對值，因此要用到path.resolve
    // 若是不設，默認爲當前目錄
    // 與命令行中的 webpack --context是同樣的
    // 最後入口文件是 context+entry,
    // 能夠寫成./today/wang[前加./],./today/wang/[後加/]，不能寫成/today/wang，若是../表示在當前目錄再往上一層
    // context 除了這裏的入口文件用到，象不少loader,plugin都會要用到這個值
    context: path.resolve(__dirname,'today/wang'),
    // entry能夠爲字符串|對象|數組三種形式
    // 字符串，適合spa,也就是單頁網頁，如手機網頁
    // 下面這個entry最終的位置是 項目根目錄/today/wang/app/entry.js
    // 前面./不能少，後面的.js能夠省略，也能夠寫
    // 如下演示三種entry，實際中取一種就行
    entry: "./app/entry", // string | object | array
    // 數組
    entry: ["./home.js","./about.js","./contact.js"],
    // 對象，適合於多入口網站，也就是mpa，對象格式的每一個鍵，如home,about,contact是每一個入口文件chunk的名字，字符串和數組沒有鍵，它也有一個chunk，名字默認爲main    
    entry: {
      home: "./home.js",
      about: "./about.js",
      contact: "./contact.js"
    }, 
}

2.2 輸出 output

輸出的配置比較多，是重點

參考: https://webpack.js.org/config...

module.exports = {
       output:{
           //最後生成的打包文件所在的目錄，是一個絕對值，，若是不指定，表示當前目錄。若是文件夾不存在，會自動建立
           //這個路徑除了這裏會用到以外，象html插件,file-loader加載器也會用到
           // 最後生成的打包文件是 path+ filename
            path:path.resolve(__dirname,'../dist/'), 
            //filename中可使用[name],[id],[hash],[chunkhash][query]五種變量
            // filename中能夠含子文件夾，如如filename: "a/b/c/[id]app.js"
            filename: 'wang.js', // 若是entry是個對象且有多個chunkname，那麼這裏會報錯，但會生成一個wang.js,它的內容是第一個chunk的，建議entry是多個chunk的對象時，不要寫固定名字，要帶[name]變量
            filename: '[name]wang.js', // 此處的[name]與entry中的chunk名字對應，象上面entry是字符串和數組時，最後輸出的文件名是mainwang.js，entry是對象，最後輸出的文件名是 homewang.js,aboutwang.js,ccontact123wang.js
            filename: '[id]wang.js', //id從0,1這麼增加的，象上面會生成0wang.js,1wang.js,2wang.js三個文件
            filename: "[name].[hash].bundle.js" //會打包成about.bab6d0fe556449a9229e.bundle,contact123.bab6d0fe556449a9229e.bundle,home.bab6d0fe556449a9229e.bundle，尤爲要記住的是[hash]不要單獨用，要與[name]或[id]配合用
            filename: "[chunkhash].yes.js", //78f16d7b19ff7ec1fd3a.yes.js,e12898a66041f68c1959.yes.js,f590b1f2de7b72dea5b3.yes.js，20位hash值
            hashDigestLength: 8  //指定最後chunkhash和hash變量生成字符串的長度，默認是20個字符
    }    
}

與hash有關的幾個配置分別是hashDigest,hashDigestLength,hashFunction,hashSalt知道就行，

2.3 模塊 modules

這個是重點，但比較簡單，後面的教程中會涉及到,只要記住結構就行

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
        {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
                //name: '[path][name].[ext]',
                name: '[name]2.[ext]', //最後生成的文件名是 output.path+ outputPaht+ name，[name],[ext],[path]表示原來的文件名字，擴展名，路徑
                //useRelativePath:true,
                outputPath: 'img/' // 後面的/不能少
            }  
          }
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

2.4 解析 resolve

這個實用，必須掌握

resolve: {
    extensions: ['.js', '.vue', '.json'], //擴展名爲.js,.vue,.json的能夠忽略，如 import App from './app'，先在當前目錄中找app.js，沒有再找app.vue，沒找到，再找.json，若是還沒找到，報錯
    alias: {
      'vue$': 'vue/dist/vue.esm.js', // 別名，這是一個正則的寫法，表示以vue結尾的，如import Vue from 'vue' 表示 import Vue from 'vue/dist/vue.esm.js'
      '@': path.resolve('src'),// 這也是爲懶人服務的,import HelloWorld from '@/components/HelloWorld'這裏的@其實就是表明src這個目錄 
      '#': path.resolve('src/ui/components') import Table from '#/table'
    }
  },

2.5 插件 plugins

模塊和插件是重點，用單獨的張姐講

plugins: [
        new HtmlWebpackPlugin(HtmlWebpackPluginConfig), // 生成首頁html5文件
        new webpack.DefinePlugin({BJ: JSON.stringify('北京'),})

    ],

2.6 開發服務器 DevServer

devServer: {
     //progress只在命令行用，不在配置文件中配
      contentBase: path.resolve(__dirname, "../dist/"), //網站的根目錄爲 根目錄/dist，若是沒有指定，使用process.cwd()函數取當前工做目錄，工做目錄>npm run dev
      port: 9000, //端口改成9000
      open:true, // 自動打開瀏覽器
      index:'front.html', // 與HtmlWebpackPlugin中配置filename同樣
      inline:true, // 默認爲true, 意思是，在打包時會注入一段代碼到最後的js文件中，用來監視頁面的改動而自動刷新頁面,當爲false時，網頁自動刷新的模式是iframe，也就是將模板頁放在一個frame中
      hot:false,
      publicPath: '/static456/',它與output.publicPath的值應該是同樣的，值爲上面contentBase目錄的子目錄，是放js,css,圖片等資源的文件夾，記得打包時，將圖片等拷貝或打包到該文件下
      compress:true //壓縮
    }

2.7 開發工具 DevTool

2.8 目標 target

2.9 監控和監控選項 Watch and WatchOptions

watch:true,  // 會監視被導入的文件是否有改動，若是有改動，自動打包，但配置文件的改動不會被監視

2.10 外部 External

路徑

剪不斷，理還亂的路徑

未完成，在整理中