珠峯-webpack

##### webpack的優點。能夠作哪裏事情。

##### npx的運行原理  https://zhuanlan.zhihu.com/p/27840803

#### webpack的插件

html-webpack-plugin:
能夠去掉多餘的雙引號，
加一個hash戳。
壓縮變爲一行。

 

#### webpack各類配置和原理。

#### loader的enforce   'pre'  previous post  不配置默認是normal

#### 圖片可能自動發佈到cdn上邊去了。

 

##### 珠峯筆記--

> 能夠作的事情。

代碼轉換。文件優化。代碼分割。模塊合併。自動刷新。代碼校驗。自動發佈。

> 本身去寫一個webpack的功能會用到哪些東西。

> webpack經常使用的loader 和plugin。

> 本身去寫一個loader。

> npx

http://www.ruanyifeng.com/blog/2019/02/npx.html

(1) 執行本地的node_modules下的包的命令行工具。

(2) 若是本地沒有那麼下載遠程的，會放到臨時文件夾，用完就刪除。

(3) 能夠執行github上的源碼。

(4) 能夠執行不一樣版本的node。

(5) 的

#### webpack各類插件的做用

> html-webpack-plugin 

(1) 去掉html頁面中的空格。

(2) 壓縮爲一行。

(3) js後邊加?解決緩存。

> css相關的loader

(1) css-loader是解析css的loader而style-loader是插入到的html中。

background: url("./logo.png」);

cssloader會翻譯爲

background: url(require("./logo.png」));

 

(2) 幾種loader的執行順序是從下到上，作右到左。

(3) sass相關的node-sass和sass-loader。

(4) stylus相關的。stylus-loader。

(5) style-loader設置參數插入的位置。

> css的拆離開插件。miniCssExtractPlugin

> css壓縮optimize-css-assets-webpack-plugin

> js壓縮(由於用了上邊的css壓縮,js壓縮就必須用這個) uglifyjs-webpack-plugin

> babel 壓縮

{

test:/\.js$/, // normal 普通的loader

 

use:{

loader:'babel-loader',

options:{ // 用babel-loader 須要把es6-es5

 

presets:[

'@babel/preset-env'

],

plugins:[

["@babel/plugin-proposal-decorators", { "legacy": true }],   // 這個用來解決裝飾器

 

["@babel/plugin-proposal-class-properties", { "loose": true }], // 這個用來解決class

 

"@babel/plugin-transform-runtime」  //這個用來解決經常使用的 相似async函數等高級的用法。可是這個不支持es7的用法。須要@babel/polyfill的補丁包

]

}

},

 

> expose-loader 的全局用法。好比把$暴露給window

expose-loader的另一種用法: import $ from 'expose-loader?$!jquery';

方式1:

 方式2:

 

方式3: 引入不打包。     

你在html中已經引入了，在js中就忽略引入。直接使用

externals: {

jquery: "$"

},

 

> html-withimg-loader這個插件能夠解決.html中的img中圖片問題。

> watch 參數

> 版權聲明

new webpack.BannerPlugin('make 2019 by jw’)

>  前端本身寫假的數據。

 

  

> 前端和後端在一塊兒的時候， 後端直接引用webpack模塊，而後引用中間件。

> resolve中的mainFields配置  

在package.json中配置

和dependencies並列

style: 'dist/css/bootstrap.css '

main: 'dist/js/bootstrap '

webpack中配置:

resolve: {

  mainFields: ['style', 'main']

}

index.js中

import ‘bootstrap'

> resolve中的mainFile默認是[‘index.js’]  

> extensions

 

##### webpack優化    

不去查看某些包的依賴 jquery

忽略某些包的某個文件的打包。隻手動引入須要的。

new webpack.IgnorePlugin(/\.\/locale/, /moment/),

 

// import moment from 'moment';

// // 設置語言

// // 手動引入所須要的語言

// import 'moment/locale/zh-cn'

// moment.locale('zh-cn');

// let r = moment().endOf('day').fromNow();

// console.log(r);

#### webpack的自我優化

// import 在生產環境下 會自動去除掉沒用的代碼

// tree-shaking 把沒用到的代碼 自動刪除掉

// es6 模塊會把結果放到defalut上

// let calc = require('./test');

// scope hosting 做用域提高

let a = 1;

 

let b = 2;

 

let c = 3;

 

let d = a+b+c; // 在webpack中自動省略 能夠簡化的代碼

 

 

##### JSON.stringify()這個方法既能夠去掉多餘的空格換行，轉爲一行，也能夠區分字符串和boolean。

 

##### 如何手寫一個require。

 

##### 多頁面打包的時候抽離公共代碼。