webPack 也更新到了4.0階段，今天看了一下官網，總結一下，零基礎的學習路徑吧，
（1）首先需要下載 webPake和webpack cli
npm install webpack webpack-cli
（2）下載完之后，則是建立新的檔案夾，進行初始化
//webpack 初始化 npm init
（3）完成之后，則是從零配置webpack 需要在根目錄下，建立一個 webpack.config.js 的檔案，里面用來寫webpack 的配置
（4）配置webpack 因為webpack 是基于node.js 運行的，所以首先需要在檔案里配置
（5）眾所周知，webpack 的作業機制就是把一堆檔案打包成 瀏覽器所認識的html 和js 和 css，那么就需要打包的入口檔案和打包之后的出口檔案夾啊
mode: "production", //模式有兩種 production development
entry: './src/index.js', //入口
output: {
filename: "build.js", //打包后得檔案名 [hash:8] 檔案名只顯示hash得前8位
path: __dirname + '/build', //絕對路徑
},
這里的注釋都相當清楚了，所以就不一一解釋了，production 是生產模式（也就是上線的版本）；development 是開發模式
（6）到了這一步，最基礎的就完成了，我們就可以做一個測驗了，新建一個src檔案夾，在里面建立一個index.js ，輸入一點東西，然后運行webpack 則會看見他自動打包成buil檔案夾，并在里面生成index.js
這個意味著打包成功
（7）但是是不是有什么不對呢？哪里不對勁呢？如果我想讓他生成index.html檔案呢？怎么生成？------那么就需要用到插件了
html-webpack-plugin 這個插件可以在build 檔案夾下自動生成index.html (首先我們需要在命令列中下載這個插件 然后再將其配置到webpack.config.js檔案中)
//下載插件 npm add html-webpack-plugin
然后則是在組態檔中進行參考
plugins 這個屬性是放置所有用到的插件
運行成功之后則會自動加載出檔案（并且還會主動引入build 檔案夾下面的js 檔案）
（8）那么如果又css 檔案呢？哪有改如何去打包呢？中間又會涉及到那些問題呢？
css 檔案，我們就需要用到 loader (他的作用就是將瀏覽器不認識的檔案轉換成所認識的js或css檔案)
loader 的作業機制順序是： 從右向左，從上往下
css 檔案中，我們用到的是 css-loader 和style-loader 所以我們應該先下載下來，然后再進行配置
這里我們需要注意的是，在src 檔案中，我們在index.js 中引入css 檔案時應該用 require 的方式來引入
這樣我們可以見已經打包成功了
（9）那么，問題又來了，既然js 都可以單獨打包成一個檔案，css 是不是也可以呢
mini-css-extract-plugin 這個插件，則是會主動生成一個css 檔案，將其插入在 link 標簽里面 之后我們需要的就是在組態檔中進行配置就ok了
（10）仔細的你會發先又有個小小的問題（就是即使在生產模式下，js 檔案被壓縮成一行了，但是生成的css 卻沒有呢？這又怎么解決呢）
這時候需要兩個插件來解決
let OptimizeCss = require('optimize-css-assets-webpack-plugin'); //這個插件可以壓縮css檔案 let UglifyJs = require('uglifyjs-webpack-plugin') //有了css 壓縮必須加上這個js壓縮 不然 js 檔案不會別壓縮
（11）這些都弄完了，那么如果是時css 檔案中又圖片呢？ js 檔案中有圖片呢？那咋整？咱下次再接著說，，，
（12）咦~ 插播一個小小的知識點，大家都知道vue 是集合了webpack 的，打包時直接 npm run build 就好了，那你知道咋配置的嗎?
OK，這次真拜拜了~~~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/109878.html
標籤：Html/Css
上一篇：持續交付體系在高德的實踐歷程