webpack學習筆記 ——篇2

 

插件整理

extract-text-webpack-plugin	用於將css/less/sass等文件單獨打包       https://webpack.docschina.org/plugins/extract-text-webpack-plugin/#src/components/Sidebar/Sidebar.jsx	1.引入 2.配置loader style-loader用於爲css包一層Js，以插入到html中，這裏不用。 3.定義插件 打包好的css即爲styles.css
vue-loader	https://vue-loader.vuejs.org/guide/#manual-configuration
cross-env	用於跨平臺設置環境變量，好比process.env.NDOE_ENV，以根據不一樣的值進行不一樣的配置   https://www.npmjs.com/package/cross-env	1.安裝：npm i cross-env --save-dev 2.package.json腳本中配置命令： 至關於：經過cross-env設置proccess.env.NODE_ENV爲development，並運行webpack命令。
webpack.DefinePlugin	用於在業務代碼中，和在webpack編譯過程當中，設置全局變量； vue、react等包括好幾個版本（好比開發版本會包含不少錯誤提示等），webpack根據這些變量名肯定該打包哪一個版本。   https://webpack.docschina.org/plugins/define-plugin/   注意：cross-env是設置node運行環境中的process對象，但在業務代碼中（好比main.js）無發判斷這個值， 這個插件將這個值配置到業務代碼的全局環境中。	1.引入webpack   2.配置插件
stylus-loader	用於編寫stylus格式css（相應於less/sass）	1.安裝stylus-loader 2.配置 { 　　test: /\.styl/, 　　use: ["style-loader","css-loader", 　　"stylus-loader"] },
autoprefixer	用於自動添加css前綴，不用寫-webkit-/-moz-等一大串。 postcss-loader用於對翻譯好的css進行優化，經過一些插件完成，autoprefixer就是其中一個。	1.建立postcss.config.js並配置： 2.
babel-loader	處理vue中的jsx格式	1.下載babel-core/babel-loader/babel-preset-env/babel-plugin-transform-vue-jsx 2.配置babel，建立.babelrc 3.配置webpack.config.js
optimization.splitChunks	用於分離第三方庫
rimraf	用於刪除目錄的工具包 注意：直接在cmd命令行執行： rimraf dist 提示rimraf不識別，須要在package.json中配置命令並經過npm run ***執行
babel-preset-stage-1	用於識別es6等更高級語法，或還在草案中的語法，好比對象擴展符號...	1.npm install babel-preset-stage-1 --save-dev 2..babelrc文件中presets數組中添加"stage-1"
vue-server-renderer	vue服務端渲染必需的插件，生成獨立的json，用於配置複雜的邏輯。正因有這個插件，vue的服務端渲染比react容易
koa-router	kou中間件，幫助koa處理路由信息
axios	用於應用向服務端發送請求
memory-fs	和node中的fs基本相同，惟一區別：對於讀取的文件，node中的fs存到磁盤上，memory-fs存到內存
optimize-css-assets-webpack-plugin	用於壓縮extract-text-webpack-plugin生成的css文件	1.引入 2.配置

 

 

cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js

命令對應的開發環境下配置：

不設置hot:true，會是頁面總體更新，已經寫進去的數據也會沒有，

設置後，只是有改動的模塊更新。