Webpack4 Dev-cli 开箱即用轻量级开发脚手架

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'
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值