biji

///////////////////////////devopen////////////////////////////
LTS版本
nvm  切換版本
npm init -y  初始化項目
npm install webpack --save-dev 安裝webpack包
node_modules/.bin/www/webpack  編譯命令

編譯生成html
cnpm install html-webpack-plugin --save-dev
webpack.config.js
編譯日誌:
Hash、 version、 time

配置快捷命令: package.json文件中的`scripts`中配置
運行: npm run build(配置的命令名稱)
查看命令: npm run

啓動服務,自動刷新
webpack-dev-server
配置命令: package.json文件中的`scripts`中配置
修改ip，端口:  webpack.config.js中添加devServer節點

eslint代碼檢查  --fix自動修正
本地安裝: eslint --save-dev
配置命令: "lintjs" ： "eslint app/ webpack.*.js --cache"
視頻中有eslint-loader ,
添加.eslintrc.js文件
npm run lintjs -- --fix //自動修正

代碼規範自動測試
eslint-loader包
配置: webpack.config.js中 添加module項
命令: npm run start
配置在瀏覽器中顯示錯誤
webpack.config.js中配置 overlay:

加載CSS
css-loader 處理@import url() 只處理加載本地資源
style-loader 處理style標籤 【】從右到左處理
css做用域與css modules

自動分離css到獨立的文件，否則頁面會閃動
安裝抽取插件  extract-text-webpack-plugin
加配置代碼webpack.config.js中

深刻loader

文件js壓縮
performance 壓縮大小限制
安裝插件壓縮: babili-webpack-plugin
html，css也可經過插件壓縮？？？

sourceMap 調試打包錯誤？？？
配置: devtool: 'source-map'

分離打包
vendor 自帶配置

統計圖表
webpack.github.io
webpack chart     stats.json
stellar webpack

配置多頁面編譯
entry

部分刷新 熱加載

////////////////////////CSN webpack///////////////////////////////////