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.配置文件格式

最終輸出一個對象 module.exports={...} ，這種最常用

最終輸出一個函數

最終輸出一個Promise

最終輸出多項配置

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+ filenamepath: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.jsfilename: '[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 devport: 9000, //端口改為9000open: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

路徑

剪不斷，理還亂的路徑

未完成，在整理中

總結

以上是生活随笔為你收集整理的webpack从零开始第2课: 配置文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。