webpack 教程
疑難：
webpack-dev-server 不能通過ip訪問？
增加 -host 0.0.0.0 配置項(xiàng)
"start": "webpack-dev-server --inline --hot --host 0.0.0.0",
安裝：
npm i --save autoprefixer babel babel-loader css-loader json-loader postcss-loader react react-hot-loader style-loader stylus-loader url-loader webpack-dev-server yeticss
配置工具：（hjs-webpack——簡化 webpack.config.js 配置）
var getConfig = require('hjs-webpack’);
module.exports = getConfig({
in: 'src/app.js', // 入口JS文件的位置
out: 'public', // 應(yīng)用打包（build）之后將存放在哪個(gè)文件夾
clearBeforeBuild: true // 是否在每次打包之前將之前的打包文件刪除
})
＊常見命令：
webpack --progress --colors
webpack —display-modules 構(gòu)建時(shí)顯示隱藏模塊（第三方引入模塊）
web pack —watch 監(jiān)控（代碼改變時(shí)自動(dòng)打包構(gòu)建）
webpack // 最基本的啟動(dòng)webpack的方法
webpack -w // 提供watch方法；實(shí)時(shí)進(jìn)行打包更新
webpack -p // 對(duì)打包后的文件進(jìn)行壓縮
webpack -d // 提供source map，方便調(diào)式代碼
＊常見錯(cuò)誤處理
開啟eslint 后報(bào)錯(cuò)
Parsing error: The keyword 'import' is reserved ／／https://github.com/yannickcr/eslint-plugin-react/issues/447
＊使用ES2015
新建 .babelrc 配置文件：｛“preset”：“es2015”｝
babel-loader
babel-core
babel-preset-es2015
＊css
npm install css-loader style-loader html-loader sass-loader node-sass --save-dev
loader: 'style!css!sass', // Or loaders: ['style', 'css', 'sass'],
＊按需加載 require.ensure()
會(huì)將包含內(nèi)容打包為一個(gè)單獨(dú)的文件： 默認(rèn)名為1.xxx.js，可以通過第三個(gè)參數(shù) “button” 添加更語義化名字 button.xxx.js
if (document.querySelectorAll('a').length) {
require.ensure([], () => {
const Button = require('./Components/Button').default;
const button = new Button('google.com');
button.render('a');
});
}
注：
- require.ensure([], fn, ‘定義名稱’)
- 內(nèi)部只能通過require()引入模塊 eg: require(‘…’).default;
- output.publicPath (定義從當(dāng)前頁面出發(fā)，到哪里可以找到按需加載到模塊資源)
＊打包前清空文件夾 （第三方插件）
安裝：npm install clean-webpack-plugin --save-dev
配置：plugins = plugins.concat([ new CleanPlugin('builds’) ])
＊自動(dòng)化提取共同依賴 (自帶插件)
new webpack.optimize.CommonsChunkPlugin({
name: 'main', // 將依賴移到我們的主文件中
children: true, // 再在所有的子文件中檢查依賴文件
minChunks: 2, // 一個(gè)依賴重復(fù)幾次會(huì)被提取出來
})
＊自動(dòng)化合并小資源
＊生產(chǎn)環(huán)境
＊添加包的hash值和包的版本化
＊抽取 生成單獨(dú)的css文件
npm install extract-text-webpack-plugin --save-dev
＊圖片資源處理
- npm install url-loader file-loader --save-dev
- file-loader：返回一段指向資源的URL，允許你給文件加入版本的概念（默認(rèn)）
- url-loader：以data:image/jpeg;base64的形式返回URL
{
test: /.(png|gif|jpe?g|svg)$/i,
loader: 'url',
query: {
limit: 10000,//小于10k，采用行內(nèi) data:image/jpeg;base64 形勢(shì)
}
}
＊開啟 source－map
{
devtool : ‘eval-source-map’, // config 里添加 devtool
}
….
// loader里添加 sourceMap 參數(shù)
{
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
include: APP_PATH
},
＊ 牛逼的熱加載 需要server啟動(dòng)
npm install webpack-dev-server webpack-dev-middleware -g
配置：devServer: {
hot: true,
inline: true,
progress:true,
//其實(shí)很簡單的，只要配置這個(gè)參數(shù)就可以了
proxy: {
'/api/': {//配置請(qǐng)求本地代理 http://localhost:5000/api/
target: 'http://localhost:5000',
secure: false
}
}
},
＊使用postcss （安裝插件）
npm i -D postcss-loader
npm i -S pricss antoprefixer
配置： loader: ExtractPlugin.extract('style','css?sourceMap!postcss?sourceMap')
…
postcss: [require('precss'), require('autoprefixer')], // 引入插件
＊pre-loader和post-loader
- preloaded實(shí)現(xiàn)加載一個(gè)文件目錄為加載一個(gè)組件
import $ from 'jquery';
import Mustache from 'mustache';
直接require模塊，WebPack會(huì)把依賴的文件都打包在一起，造成文件很臃腫。
異步加載的代碼會(huì)被分片成一個(gè)個(gè)chunk，在需要該模塊時(shí)再加載，即按需加載
同步加載過多代碼會(huì)造成文件過大影響加載速度，
異步過多則文件太碎，造成過多的Http請(qǐng)求，同樣影響加載速度
原則：首屏需要的同步加載，首屏過后才需要的則按需加載（異步）
按需加載的實(shí)現(xiàn)方式：
滾動(dòng)加載
點(diǎn)擊加載
延時(shí)加載
模糊加載
webpack 預(yù)打包dill，優(yōu)化編譯速度
DllPlugin & DllReferencePlugin
webpack.dill.config.js
