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'
},