曰：“工欲善其事，必先利其器”，此项目专为前端工程师打造的webpack全系列开发，不局限于官网建设、后台管理系统、移动端开发（h5）。不局限于react、vue等框架
项目分支目前支持基础webpack项目建设（可扩展性），移动端开发，后台管理系统
配置完善的webpack基建，可由用户在此基础上应用于其他框架项目
用于开发h5的利器，具备完善的手机适配方案，全面支持sass
react+redux+antdesign+less开发大中型企业级后台管理系统
在node环境下安装有npm、cnpm、yarn
npm i
npm start
npm run dist
npm run test
npm run analyze
项目中可以使用最新javascript版本语法，但是浏览器并不完全支持，为了浏览器能够支持所以需要编译转换为浏览器的支持的标准语法，所以babel是不二首选
- 安装babel核心、模块解析包以及预处理器
npm install --save-dev babel-core babel-loader babel-preset-env
- 配置模块解析包（配置文件例如：webpack.config.js）以及预处理器（.babelrc）
rules: [
{
test: /\.js|jsx$/,
exclude: /node_modules/,
use: [
"babel-loader"
]
},
]
{
"presets": ["env"]
}
- babel-polyfill的cdn方式，放在html head标签里靠前位置
<script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script>
- babel-polyfill的npm方式（两种）
npm i babel-polyfill --save-dev
方法1：在入口文件最顶部
import 'babel-polyfill'
方法2：配置入口文件，比如：
entry: {
app: [
'babel-polyfill',
'./src/index'
]
},
有时候项目需要为了提高首次载入速度而需要按需加载，比如react-router的按需加载
- babel-plugin-syntax-dynamic-import插件
npm install --save-dev babel-plugin-syntax-dynamic-import
- 配置.babelrc
{
"plugins": ["syntax-dynamic-import"]
}
- webpack生产环境中的output配置
{
...
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
}
- import
function getComponent() {
return import('lodash').then(_ => {
var element = document.createElement('div');
return element;
}).catch(error => console.log(error));
}
getComponent().then(component => {
console.log(component);
});
- async
async function getComponent() {
const bundle = await import('lodash');
return bundle;
}
getComponent().then(bundle => {
console.log(bundle.default)
});
3.require
require.ensure([], function(require) {
let bundle = require("lodash");
console.log(bundle);
}, 'bundle');
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent