- 代码转换：scss,less,转为 ts 转为js
- 文件优化: 压缩合并js css,图片合并优化
- 代码分割:（公共文件抽离，路由懒加载）
- 自动刷新
- 自动发布
- 初始化项目
npm init -y
npm i -D webpack webpack-cli
webpack 默认支持js模块化,module.exports,require(xx)
- 处理样式
- css : style-loader,css-loader
{
test:/\.css$/,
use:[{
loader:'style-loader',
options:{
insertAt:'top' //插入到header最顶部
}
},'css-loader']
},
- less: less less-loader
{
test:/\.less/,
use:[
{
loader:'style-loader',
options:{
insertAt:'top' //插入到header最顶部
}
},
'css-loader',
'less-loader'
]
},
- scss: node-sass sass-loader
{
test:/\.scss/,
use:[
{
loader:'style-loader',
options:{
insertAt:'top' //插入到header最顶部
}
},
'css-loader',
'sass-loader'
]
},
style-loader 处理的样式默认以style的形式插入到了head中,如何使用link的形式呢
//引入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//可以定义多个
//plugins中：
new MiniCssExtractPlugin({
filename: 'main.css'
}),
//修改style-loader为以下：less,sass同理
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'post-css', 'css-loader']
},
autoprefixer:postcss-loader
npm i -D babel-loader @babel/core @babel/preset-env
- 内联loader
import $ from 'expose-loader?$!jquery'
这样window.$就可以访问了
或者觉着这样引入太麻烦了，可以在wepack中配置 modules:
{
test:require.resolve('jquery'),
use:'expose-loader?$'
}
再引入的时候 用import $ from jquery即可
或者觉得这样还麻烦,直接使用模块注入的方式配置更方便:
new Webpack.ProvidePlugin({
'jquery':'$'
}),
- routes/config-bak.js 中添加路由
- dLayout中引用路由
- components/sideMenu.js中侧边栏显示菜单
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent