Webpack4 Dev-cli
为基于 Webpack 管理的前端项目而打造的一款轻量级开发脚手架。
特性
- 预配置基本依赖,热更新等等。
- 支持 Webpack 4.x.x 版本,Less 样式等等。
- 可抽离和压缩的 CSS、JS 文件。
链接
开源链接:https://github.com/zpfz/webpack4-dev-cli
开始使用
我们建议使用 npm 或 yarn 进行安装,它不仅使开发更容易,而且还允许您利用 Javascript 包和工具丰富的生态系统。
- 克隆
git clone https://github.com/zpfz/webpack4-dev-cli.git
cd webpack4-dev-cli
- 安装依赖
yarn install
或者
npm install
- 项目运行
yarn run serve
或者
npm run dev
- 项目生成
yarn run build
或者
npm run build
文件结构
在下载完成后,默认目录和文件结构如下:
webpack4-dev-cli
├─ .babelrc
├─ .browserslistrc
├─ .eslintrc
├─ .gitignore
├─ LICENSE
├─ README.md
├─ package.json
├─ public
│ ├─ img
│ │ └─ webpack.png
│ └─ index.html
├─ src
│ ├─ index.js
│ └─ less
│ └─ style.less
└─ webpack
├─ webpack.common.js
├─ webpack.config.dev.js
└─ webpack.config.prod.js
其中,部分文件(文件夹)描述如下:
-
public : 你可以把你的资源放在这边,比如图片、字体等等。另外,index.html 是 HTML 模板文件。
-
src : 你可以把你主要的脚本(.js)和 样式表(.css/*.less/…)放在这里。另外,index.js 是入口文件。
-
webpack : 基础配置都存放在该文件夹下,比如 webpack.common.js、webpack.config.dev.js、webpack.config.prod.js 。
配置
webpack.common.js
更改入口文件 index.js
:
entry: {
vendor: Path.resolve(__dirname, '../src/index.js')
},
更改输出路径和文件名 :
output: {
path: Path.join(__dirname, '../build'),
filename: 'js/[name].js'
},
更改 HTML 模板文件 :
new HtmlWebpackPlugin({
template: Path.resolve(__dirname, '../public/index.html')
})
使用别名 :
// use ~ instead of ../src
resolve: {
alias: {
'~': Path.resolve(__dirname, '../src')
}
},
webpack.config.dev.js
配置本地服务器 :
devServer: {
// 更改端口为 8080
// port:8080,
inline: true
},
更多参数请看这里 : devServer
webpack.config.prod.js
更改输出路径和文件名 :
output: {
filename: 'js/[name].[chunkhash:8].js',
chunkFilename: 'js/[name].[chunkhash:8].chunk.js'
},