webPack 4.0的零基礎學習

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，此次真拜拜了~~~~