适用于一些简单的多页面项目(比如说component项目),可以本地调试开发和生产打包压缩。
- 2018-05-16 加入多页应用的支持
- 2018-05-04 加入cross-env进行运行参数兼容 加入webpack-bundle-analyzer进行包内容分析
- 2018-04-30 升级支持Webpack4✨ 添加SCSS支持
- 模块化
- ES6+(Babel转义)
- ESLint
- CSS/LESS/SCSS
- PostCSS/Autoprefixer
- 本地开发支持Hot Module Replacement(HMR),并发布到本地
- 编译生产支持js压缩并生成sourceMap和css压缩,在
dist/
文件夹生成编译文件 - CDN配置(设置webpack config文件中的
output.publicPath
) - 多页应用配置(设置webpack config文件中的
entry
。页面设置webpack config文件中添加HtmlWebpackPlugin) - 多页使用方式 src/entry目录下面创建每一个页面的目录入口为
index.js
和index.html
- 解压zip包
- cd进目录
npm i
安装node依赖(太慢可以配置淘宝镜像)- 本地开发
npm run dev
/ 编译生产npm run build
- 如果只需要js和css,删除webpack config中的HtmlWebpackPlugin
工程结构如下
.
├── .babelrc # babel配置文件
├── .editorconfig # 通用编辑器配置文件
├── .eslintignore # eslint跳过检查的配置文件
├── .eslintrc.js # eslint配置规则文件
├── .postcssrc.js # postcss配置文件
├── README.md
├── build # webpack配置文件夹
│ ├── webpack.base.conf.js # base文件
│ ├── webpack.dev.conf.js # 开发用
│ └── webpack.prod.conf.js # 生产用
├── package.json # 项目配置
└── src # 源代码目录
├── index.html # 入口html文件
├── index.js # js入口文件
└── less # less文件夹
└── main.less