webPack 4 0的零基礎學習

webpack 也更新到了4.0階段，今天看了一下官網，總結一下，零基礎的學習路徑吧。

npm install  webpack webpack-cli

//

webpack 初始化
npm init

（4）配置webpack 因為webpack 是基於node.js 執行的，所以首先需要在檔案裡配置

（5）眾所周知，webpack 的工作機制就是把一堆檔案打包成 瀏覽器所認識的html 和js 和 css，那麼就需要打包的入口檔案和打包之後的出口資料夾啊

mode: "production", //模式有兩種  production development

entry: './src/index.js', //入口
output: ,

（6）到了這一步，最基礎的就完成了，我們就可以做乙個測試了，新建乙個src資料夾，在裡面建立乙個index.js ，輸入一點東西，然後執行webpack 則會看見他自動打包成buil資料夾，並在裡面生成index.js

這個意味著打包成功

（7）但是是不是有什麼不對呢？**不對勁呢？如果我想讓他生成index.html檔案呢？怎麼生成？------那麼就需要用到外掛程式了  

npm add html-webpack-plugin

然後則是在配置檔案中進行引用

plugins  這個屬性是放置所有用到的外掛程式

執行成功之後則會自動載入出檔案（並且還會主動引入build 資料夾下面的js 檔案）

（8）那麼如果又css 檔案呢？哪有改如何去打包呢？中間又會涉及到那些問題呢？

css 檔案，我們就需要用到 loader (他的作用就是將瀏覽器不認識的檔案轉換成所認識的js或css檔案) 

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，這次真拜拜了~~~~
 
手寫webpack4 0的配置
webpack詳解 webpack是乙個打包工具，他的宗旨是一切靜態資源即可打包。有人就會問為什麼要webpack？webpack是現代前端技術的基石，常規的開發方式，比如jquery,html,css靜態網頁開發已經落後了。現在是mvvm的時代，資料驅動介面。webpack將現代js開發中的各種新...
10天掌握webpack 4 0 基礎篇
1.基本配置檔案 1.webpack.config.js const path require path module.exports mode 為development或production之中的乙個 entry 是要打包的入口檔案 就是專案的入口檔案 output 出口 可以配置出口檔案的名字 ...
零基礎學習 nginx tomcat
我們平時對j2ee開發的時候使用的是tomcat伺服器，tomcat伺服器是用來解析servlet動態網頁的，比如jsp。而apache web伺服器只能處理靜態頁面，如html，css等。其實tomcat也可以解析靜態頁面，但是效率很差，我們在開發的時候因為注重開發，並不用考慮效能問題，所以並不需...