@quclouds/webpack v1.0.6

webpack

配置常用的 webpack 信息

• css/scss 文件编译，支持 postcss & autoprefixer
• js 文件编译，支持 es6/7 语法
• vue 文件编译, html 模版支持 pug 语法
• 其余功能根据项目扩展

package.json 修改

添加 browserslist & postcss 信息, 修改依赖模块信息

{
    "name": "xxx",
    ...
    "browserslist": {
        "> 1%",
        "last 2 versions",
        "last 10 Chrome versions",
        "last 5 Firefox versions",
        "Safari >= 6",
        "ie > 8"
    },
    "postcss": {
        "plugins": {
            "postcss-preset-env": {},
            "autoprefixer": {}
        }
    },
    ...
    "devDependencies": {
        "@quclouds/webpack": "^1.0.2"
    },
    "dependencies": {
        "webpack-cli": "3.3.0"
    }
}

创建.eslintrc.js文件

在项目根目录下创建 .eslintrc.js

编写webpack脚本

目录结构

build
    webpack.js
src
    js
        app.js
package.json
config.json
.eslintrc.js

修改 package.json

添加项目npm脚本命令
{
    ...
    "scripts": {
        "dev": "webpack -w --config build/webpack.js"
    }
    ...
}

配置config.json

{
  "version": "项目版本",
  "mode": "运行环境 development 或者 production",
  "output": "见下面 config.output 描述",
  "style": "见下面 config.style 描述 编译css时的全局变量"
}

• config.output

{
  "output": "./dist"
}
指定 webpack 输出目录，相对目录时以项目跟目录为参考, 可以指定绝对路径

• config.style

{
  "style": "./build/style.js"
}

function style(env) {
  // 以对象形式返回
  return {
    fontsize: "12px"   // 在 scss 环境中以 $fontsize 使用
  }
}
module.exports = style

修改 webpack.js 代码

/**
 * @file webpack 配置
 * @author 
 */

const path = require('path')
const webpack = require('webpack')
const dllWebpack = require('@quclouds/webpack')
const merge = require('webpack-merge')

// 项目入口
// 配置规则与 webpack entry 相同
function entry() {
  return {
    'app': path.join(__dirname, '../src/js/app')
  }
}

// 返回配置信息
module.exports = function(tmp, env) {
  return new Promise(function(resolve){
    dllWebpack(env).then(function(result){
      const config = merge(result, {
        entry: entry()
      })
      resolve(config)
    })
  })
}