初識webpack

爲何須要構建工具

轉換ES6語法 轉換JSX CSS前綴補全/預處理器 壓縮混淆 圖片壓縮

初識webpack

webpack默認配置文件：webpack.config.js

能夠經過webpack --config指定其餘的配置文件 好比能夠在開發過程當中使用webpack --config webpack.dev.config.js
在生產環境可使用 webpck --config webpack.produce.config.js

webpack 配置組成

環境搭建 安裝node.js npm /安裝webpack webpack-cli

安裝webpack webpack-cli

在webpack4裏面 將 webpack內核和webpack-cli進行了分離，所以在實際項目使用 咱們需同時安裝webpack webpack-cli 建立空目錄和package.json mkdir my-project cd my-project npm init-y (-y是默認都選擇yes 這時候會生成初始的package.json的文件) npm install webpack webpack-cli --save-dev(dev安裝的是devDependencies裏面，不會安裝dependencies裏面) 安裝好了以後，咱們能夠打印一下安裝的版本看一下安裝是否成功

安裝完webpack,經過簡單的例子感覺一下webpack的使用

webpack初體驗，一個簡單的例子

建立一個webpack配置文件 webpack.config.js

這個例子設定了下 entry output mode 對於entry 咱們將src/index.js做爲入口文件 output咱們輸出到當前文件夾下的dist目錄，dist這個目錄輸出的文件名叫bundle.js,同時咱們指定mode值爲 production也就是生產環境 webpack.config.js須要經過module.exports = {}導出個對象的 編寫代碼：

接下來進行打包 首先仍是找到./node_modules/.bin/webpack 能夠直接運行 直接運行就是不指定webpack配置文件的名稱

這時候就打包好了 而後咱們看一下打包的結果是什麼樣子的

這裏能夠看到打包出來放到dist目錄，dist目錄有一個bundle.js文件輸出出來了 咱們能夠看一下這個效果，由於目前沒有Html文件的，爲了看效果，咱們手動建立一個html文件 在這個html文件裏面，手動的把這個打包好的腳本bundle.js引入進來

用瀏覽器打開一下

這個時候效果就出來了，不過你們可能經過這個例子發現，目前運行webpack打包的話多是比較麻煩的 須要./node_modules/.bin/webpack 這一串 因此咱們能夠經過便捷的方式進行webpack的打包。

經過npm script運行webpack

每次咱們安裝依賴(webpack )，這樣依賴若是有建立命令的話，它會在./node_modules/.bin下建立一個軟鏈接，那麼咱們 package.json能夠默認讀到./node_modules/.bin下命令，因此能夠直接在package.json指定一個scripts，裏面指定webpack就能夠了， 若是在scripts運行webpack,它就會去./node_modules/.bin下去尋找，

配置一下試試，

這樣咱們就能夠npm run build進行打包。