模組熱更新
sourcemap
介面**
**規範檢查
生產環境的需求
提取公共**
壓縮混淆
檔案壓縮/base64編碼
去除無用的**
二者共同點:
同樣的入口
同樣的**處理(loader處理)
同樣的解析配置
使用webpack-merge拼接開發環境和生產環境:
配置檔案:
webpack.dev.conf.js
webpack.prod.conf.js
webpack.common.conf.js
module.exports = ,
plugins:[
new webpack.hotmodulereplacementplugin(),
new webpack.namedmodulesplugin(),
]}
module.exports = )
}),new webpack.optimize.commonschunkplugin(),
new htmlinlinkchunkplugin(),
new webpack.optimize.uglifyjsplugin(),
new cleanwebpackplugin(['dist']),
]}
const productionconfig = require('./webpack.prod.conf.js')
const delevopmentconfig= require('./webpack.dev.conf.js')
const merge = require('webpack-merge');
const extracttextwebpackplugin= require('extract-text-webpack-plugin');
const htmlwebpackplugin= require('html-webpack-plugin');
const generateconfig = env=>)
const fileloader = env==='production'
?[}]
:[}]
const cssloaders = [},)
:)}},,
] const scriptloader = ['babel-loader'].concat(env == 'production'?
:[}]),
];const styleloader = env === 'production'
?extractless.extract()
:.concat(cssloaders )
return,
output:{},
resolve:,...},
module:,,}
}]:)},]
},plugins:[
extractless,
new htmlwebpackplugin(
}),new cleanwebpackplugin(['dist']),
new webpack.provideplugin()]}}
module.exports = env=>
webpack開發環境和生產環境打包
開發環境webpack.config.js基礎的配置 const path require path 首先要安裝該外掛程式 npm i html webpack plugin d const htmlwebpackplugin require html webpack plugin module.e...
webpack開發環境和生產環境切換原理
在package.json中有如下設定 scripts 當執行專案時，cmd中敲命令 npm run dev npm run build prod npm run build sit npm run lint，就會執行不同環境下的 如開發環境 生產環境等等。其中cross env是用於跨平台環境變數...
webpack生產環境和開發環境的配置
最近在做公司遊戲預約頁面的時候，在配置webpack的時候，忽略了生產模式切換，導致開發過程中有些痛苦，當改動樣式或者某個外掛程式配置時，本地server要等待編譯很久才生效。用了很久的webpack做開發，之前一直沒太在意，現在特地整理下，也為以後做專案更加規範吧。在配置前，還是先了解下生產環境和...