webpack-init : 一款自用的webpack脚手架

Github: https://github.com/mcc108/webpack-init

webpack

Webpack is a bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows to load parts for the application on demand. Through "loaders," modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. https://webpack.github.io


webpack-init

一款自用的webpack脚手架

init demo

目录结构

webpack-init  
   ├─ README.md
   ├─ index.html *      // 访问入口 (打包后)
   ├─ dist *            // 打包后文件夹
   │    └─ ...
   ├─ src               // 打包前文件夹
   │    ├─ css
   │    │   ├─ style.css
   │    │   └─ ...
   │    ├─ sass
   │    │   ├─  style.scss
   │    │   └─ ...
   │    ├─ img
   │    │   └─ ...
   │    ├─ font
   │    │   └─ ...
   │    ├─ js
   │    │   ├─ main.js  // webpack入口
   │    │   └─ ...
   │    └─ index.html   // 访问入口 (打包前)
   ├─ node_modules      // 依赖包文件夹 (gitignore)
   │    └─ ...
   ├─ webpack.config.js // webpack打包配置
   ├─ package.json      // npm本项目描述
   └─ .gitignore
   (*表示访问必需)

0、初始化

npm切换官方源

$ sudo npm install nrm -g --registry=https://registry.npm.taobao.org
$ nrm ls

* npm -----  https://registry.npmjs.org/
  cnpm ----  http://r.cnpmjs.org/
  taobao --  https://registry.npm.taobao.org/
  ...

$ nrm test

  ...

$ nrm use cnpm
|| or
$ nrm use taobao

克隆仓库

$ git clone git@github.com:mcc108/webpack-init.git [你的项目名]
$ cd [你的项目名]

现在,以下命令均在你的项目根目录执行

$ rm -rf .git && git init

该命令将初始化git

- 如果有package.json

  • 根据你的项目对package.json中以下信息进行直接修改
    • name version description repository author bugs homepage

- 如果无package.json

$ npm init

1、开发

webpack打包配置文件 webpack.config.js 中注释有一些详解

如果package.json中有已配置的node_modules,可直接运行

$ npm install

否则:

1、安装webpack及插件

$ npm install webpack extract-text-webpack-plugin html-webpack-plugin --save-dev

2、根据选择安装loader

// html *
$ npm install html-loader --save-dev
// es2015 & react
$ npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
// sass
$ npm install style-loader css-loader sass-loader node-sass compass-mixins --save-dev
// less
$ npm install style-loader css-loader less-loader less --save-dev
// css *
$ npm install style-loader css-loader --save-dev
// img *
$ npm install url-loader image-webpack-loader --save-dev
// font
$ npm install url-loader --save-dev
// json
$ npm install json-loader --save-dev

3、入口文件main.js

  • require css/less/sass样式/js
  • npm安装第三方依赖包
$ npm install [modules_name] --save
  • 在配置文件 webpack.config.jsentry - lib 中引入第三方依赖包
  • 在入口文件 main.jsrequire 并使用第三方依赖包

4、页面index.html

  • index.html中无需插入css和js,即无需创建<link rel="stylesheet" href=".."><script src=".."></script>html-webpack-plugin插件将会帮我们做这些事情,并且加上文件hash版本号。
  • 打包前页面位于./src/index.html,打包后将位于./index.html

2、打包

$ webpack -p

其他打包方式

$ webpack     // 最基本的启动webpack方法
$ webpack -w  // 提供watch方法,实时进行打包更新
$ webpack -p  // 对打包后的文件进行压缩,提供production
$ webpack -d  // 提供source map,方便调试。

配置npm run

package.json中加入

"scripts": {
    "build": "webpack -p",
    "clean": "rm index.html && rm -rf dist",
    "rebuild": "npm run clean && npm run build"
}

打包

$ npm run build

清除

$ npm run clean

重新打包

$ npm run rebuild

@ Cong Min - https://congm.in