?

	['1','3','10'].map(parseInt)
	

webpack 魔法註釋

import(/* webpackChunkName: moduleA */’./moduleA.js’)

thee shaking配置

npm run pord 才開啟tree shaking npm webpack-deep-scope-plugin (深度tree shaking)

	//	js tree shaking
	// js src/component /sync
	import {isArray as a} from 'lodash-es';
	const sync = function() {
	  console.log('sync')
	}
	const isArray = function(args) {
	  console.log(a(args));
	
	}
	export { sync, isArray }

	// src/index		
	> 注意沒有用isArray 對比 差異 {isArray} 與lodash from 。。。
		import {sync, isArray} from './components/sync';
		console.log('hello yideng webpack');
		sync();
	
 

css tree-shaking

1. use: [“style-loader”,“css-loader”]

css module

        2 .    use: ['style-loader', {
                     loader: 'css-loader?modules'
                     		// class 為md5的值
                     	// 改class形式 
                     																		// name 資料夾的名字
                     																		// local 類的名字
                     			// 'css-loader?modules&localIdentName=[name]_[loacal]-[hash:5]'
               }]
               // 示例 import css from './style.css'
                 var div = document.createElement('div');
 					div.innerHTML = 'zhong';
 					div.className = css.test; 
 

css tree shaking

提取css

	npm i mini-css-extract-plugin -D 
	* 不能用style-loader 
	* 改為
	MiniCSSextractPlugin.loader
	css-loader 不能採用module模式
	* webpack 3.0 用 extract-text-webpack-plugin

npm i purifycss-webpack purify-css -D //

webpack 4 minimize 配置 uglifyjs (壓縮js)

• npm i uglifyjs-webpack-plugin -D

 minimizer: [
            new Uglifyjs({
                uglifyOptions: {
                    // ecma那個標準
                    ecma: 6,
                    // 是否用快取
                    cache: true,
                    // 並行
                    parallel: true
                }
            })
        ]

清除資料夾的外掛

clean-webpack-plugin

	
	plugins :[
		        new CleanWebpackPlugin(['build'])
	]

html 模版

npm i html-webpack-plugin -D new HtmlWebpackPlugin({ filename: ‘index.htlm’, template: ‘./src/index.html’ })