寫乙份簡單的webpack2 的配置檔案,無比簡單

2022-09-02 06:03:10 字數 1114 閱讀 1233

這是乙份自己用到的webpack2的配置寫法,從看webpack2開始,發現自己越來越懶了,現在html檔案都不想自己寫了,直接自己生成。。。

哈哈,這次是可以無比完美的匯入css啦

開發的時候在命令列輸入

webpack-dev-server --inline --hot
在上線時使用

webpack -p
-p 的意思的順便壓縮**。。。

var webpack = require("webpack");

var path = require("path");

var extracttextplugin = require('extract-text-webpack-plugin'); // 把css從js中獨立抽離出來

var htmlwebpackplugin = require('html-webpack-plugin'); // 生成html檔案並且自動引用js

module.exports = ,

devtool: "source-map",

output: ,

module:

}]},

},},

// // }

// }]}

] },

plugins: [

// new webpack.optimize.commonschunkplugin('common'), // 缺省會把所有入口節點的公共**提取出來,生成乙個common.js

// new extracttextplugin("[name].css"), // 抽取css

// // new htmlwebpackplugin(),

new htmlwebpackplugin(),

// new htmlwebpackplugin()

], devserver: , // 替換url請求中的字段,比如此處是把pop_web欄位重置為空

// bypass: function(req, res, proxyoptions)

// }

}} }

}

記錄一次webpack2的專案架構

1 npm init y 生成package.json專案描述檔案。7 建立.babelrc檔案將預設寫入 preset 8 分別建立兩個資料夾 src資料夾和build資料夾,前者用於放源 後者用於放打包後的的 9 webpack.config.js的配置 const path require p...

這是我寫的乙份簡歷模板

練習簡歷 title head body div table border 1 style border collapse collapse border color blue width 600px height 500px tr th colspan 7 個人簡歷 th tr tr td 姓名 ...

Webpack2 的無腦友好錯誤提示工具

你只需要一行就可以實現hot reload和友好的錯誤提示 new webpackbrowserlog webpackconfig 這裡有張gif的效果圖,請等待 gif 平時我們都在瀏覽器的console面板裡看錯誤,或者是在命令列裡看錯誤真是太累了!瀏覽器直接顯示錯誤極大的提公升了開發的效率!不...