btf-middleware-webpack4

名称

btf-middleware-webpack4

功能

抽离webpack4通用构建配置，对webpack版本4以下构建工具无缝升级，该工具支持对Vue、ts、es6、less、sass、scss编译

参数说明

参数	说明	类型	必选
isMulti	是否为多页应用	Boolean	是
entry	构建入口(单页或多页)	Object	是
port	开发端口	Number	是
mode	开发模式	String	是 (developmemnt或 production)
env	同上	String	是(dev或prod)
srcPath	模板入口地址,提供给htmlWebpackPlugin使用	String	是
proxy	开发环境代理对象	Object	是
modules	模块搜索内容	String	否
isAnalyzer	打包体积查看	Boolean	否
alias	别名	Object	否
externals	全局配置不打包的文件	Object	否
useTs	是否使用ts	Boolean	否

使用

const path = require('path');
const baseDir = process.cwd();
const webpackBuild = require('../index');
const mode = process.env.NODE_ENV;
const env = mode === 'development' ? 'dev' : 'prod';
function resolve (dir) {
    return path.join(__dirname, '..', dir)
}
const params = {
  isMulti: false,
  entry: {
    app: path.resolve(__dirname, './src/main.js')
  },
  proxy: {
    api: ['/api', '/test'],
    target: 'http://localhost:3000'
  },
  port: 8090,
  path: resolve('dist/static'),
  publicPath: 'dist/static',
  isAnalyzer: false,
  alias: {
    '@': path.resolve(__dirname, 'src')
  },
  srcPath: baseDir,
  mode: mode,  // production or development
  modules: '',
  env: env // prod or dev
};
webpackBuild(params);

说明

1、需要目标项目package.json webpack安装到4.x版本

注意事项

• 如原项目中使用.postcssrc.js建议替换为postcss.config.js,配置如下，或browserslist配置写入到项目package.json

module.exports = {
    plugins: [
        require('postcss-import'),
        require('autoprefixer')({
            overrideBrowserslist: [
                'iOS >= 7',
                'Android >= 4.1',
                'last 10 Chrome versions',
                'last 10 Firefox versions',
                'Safari >= 6',
                'ie > 8'
            ]
        })
    ]
}

更新日志

1.0.3版本更新内容如下

• 修复构建不输出html文件的问题
• 新增参数useTs,是否需要tsconfig.json配置
• development编译less\sasss\scss\stylus
• 调整baseConfig配置
• 修复development热更新失败问题
• 支持动态import

1.0.6版本更新内容如下

• 修复development直接编译css文件错误

1.0.7版本更新内容如下

• 修复proxyMiddleware版本问题

1.0.8版本更新内容如下

• 修复production编译sass报错
• 开发环境去掉webpack-hot-middleware打包到vendor问题

1.1.0版本更新内容如下

• 更新调用示例

1.1.1版本更新内容如下

• 修复构建less含有@{deep}关键字打包错误