1.0.1 • Published 6 years ago
webpack-init-project v1.0.1
webpack-init-project
Introduction
一个以webpack4为基础的现代工程模版,打造简单易用的webpack环境项目
主要有以下特点:
- 支持ES6 jsx 语法 (doing)
- 支持vue 语法 (doing)
- 可以根据场景需要裁剪或者扩展 (done)
主要包括:
- base部分
配置内容详细见webpack.common.js。更多关于:生成css单独文件、CSS Module、css sourceMap等内容可以翻看具体的loader链接
- 入口文件:
- App : index.js
- Common : common.js
- js文件
- css文件:默认采用打包输出,没有生成单独的文件;支持less和scss;开启Css Module(规则:local-hash:base64:5)
- style-loader : js -> tag style
- css-loader : css -> css in js
- less-loader : less -> css
- sass-loader : sass -> css
- postcss-loader : Autoprefixer
- MiniCssExtractPlugin :js -> file style
- 图片/字体:
- 默认开启file-loader : file module -> url
- xml tsv等: 默认未开启处理
- 开发环境配置部分
配置内容详细见webpack.dev.js
- mode:'development':webpack4.X 指明环境
- webpack-hot-middleware
- CleanWebpackPlugin
- HtmlWebpackPlugin
- NamedModulesPlugin
- HotModuleReplacementPlugin
- 生产环境配置部分
配置内容详细见webpack.prod.js
- mode:'production'
- optimization
- server 部分
- 使用express创建http服务
- 使用webpack-dev-middleware,文件变更时实时编译
- 所有路由重定向到入口文件,使用前端路由导航
Before use
因为默认使用了CSS Module,CSS Module 详细参考
.normal { color: green; }
// without css module: import './Button.css'; buttonElem.outerHTML = `<button class=${normal}>Submit</button>`
// with css module import styles from './Button.css'; buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`
Install
npm install
build
npm run build
start
npm start
TODOLIST
开发一个脚手架,让用户自己选择框架安装,是webpack环境配置更加具有针对性
- react
- vue
- none: 默认不引入框架的配置环境
Design Summary
- webpack-hot-middle 要想起作用,还要在每一个要监听的入口文件加入
webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true