fx-webpack

移动端统一打包方案、基于webpack@4封装

1、目标：

统一公司内部前端打包，制定配置文件标准规范，减少产品线的耦合，不懂webpack的开发也能实现项目打包。

2、支持框架

已支持Vue，后续支持react

3、优化

做到开发人员易使用、包大小、编译做到最优。

4、使用

安装

npm install --save-dev fx-webpack

注意，在项目的package.json不再需要配置webpack，css—loader等相关依赖

配置文件

在项目目录下执行下面命令，生成fx.webpack.config.js配置文件

npx fx-webpack init

配置.babelrc文件

启动dev服务

npx fx-webpack start [options] [entry]

Options：

  -o,--open         open browser on server start
  -c,--copy         copy url to clipboard on server start
  -h,--host <host>  specify host (default: 0.0.0.0)
  -p,--port <port>  specify port (default: 8088)
  -s,--https        use https (default: false)
  -h, --help        output usage information

Build

npx fx-webpack build [options]

Options：

  -d, --dev         build for development
  -t, --test        build for test
  -r, --preprod     build for prepare production
  -p, --production  build for production
  -h, --help        output usage information

fx.webpack.config.js配置文件

// 项目目录下（package.json所在目录，下同）新建 fx.webpack.config.js  
module.exports = {
    fxVue: true, // 是否使用Vue
    fxReact: false, // 是否使用React, 暂未支持该配置
    fxPreProcessors: {
        less: true, // 是否使用less
        scss: true, // 是否使用scss
        sass: true, // 是否使用sass
        postcss: false, // 是否使用postcss
        styl: false, // 是否使用styl
        stylus: false, // 是否使用stylus
        cssOption: {}, // css配置,参考 https://www.webpackjs.com/loaders/css-loader/#选项
        lessOption: {}, // less配置,参考 https://www.webpackjs.com/loaders/less-loader/#示例
        sassOption: {}, // sass/scss配置,参考 https://www.webpackjs.com/loaders/sass-loader/#示例
        postcssOption: {}, // postcss配置,参考 https://www.webpackjs.com/loaders/postcss-loader/#options
        stylusOption: {}, // stylus/styl配置,参考 https://github.com/shama/stylus-loader
        sassResourcesPath: [] // sass/scss全局变量文件，配置相对路径，例如sassResourcesPath: ['src/assets/scss/global.scss']
    },
    fxEntry: './src/main.js', // 单个应用入口,
    fxOutputPath: 'dist', // 输出目录名称
    fxAssetsPath: 'static', // 输出静态文件目录
    fxAppPublic: 'static',// 要拷贝的源文件目录名称
    fxHtml: {
        title: 'title', // 生成html文件的标题,在模板中配置<title><%= htmlWebpackPlugin.options.title %></title>
        template: 'index.html', // html模板文件名，请放在项目目录下
        filename: 'index.html', // 输出的html的文件名称，将输出到fxOutputPath配置目录下
    },
    fxAlias: {
        '@': 'src', // 创建import或require的别名，来确保模块引入变得更简单，配置相对路径，例如 'assets_img_common': 'src/assets/img/common'。
    },
    fxDevServer: {
        https: false,
        host: '0.0.0.0',
        port: 8062, // dev-server 服务端口号
        hot: true, // 启用webpack的热模块更新
        compress: false, //启用gzip压缩
        open: false, // 告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。
        clientLogLevel: 'warning', //配置在客户端的日志等级，这会影响到你在浏览器开发者工具控制台里看到的日志内容
        proxy: {
            // 代理一些URL。具体用法见https://github.com/chimurai/http-proxy-middleware
            '/gateway': {
                target: 'http://t-zsbjcdz.jchl.com/',
                changeOrigin: true
            },
        },
    },
    fxWebpack: {
        // 以下配置已有默认值，一般无需配置，若有需要，请按webpack配置要求进行配置
        module: {
            rules: [],
        },
        optimization: {},
        performance: {},
        externals: {},
        plugins: []
    }
}

.babelrc配置文件

{
  "presets": [
    "@vue/babel-preset-jsx",
    "@babel/preset-env"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", { "corejs": 2 }],        
    "@babel/plugin-syntax-jsx",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-transform-modules-commonjs"
  ],
  "env": {
    "development": {
      "presets": [
        "@vue/babel-preset-jsx",
        "@babel/preset-env"
      ],
      "plugins": [
        ["@babel/plugin-transform-runtime", { "corejs": 2 }],        
        "@babel/plugin-syntax-jsx",
        [
          "@babel/plugin-proposal-decorators",
          {
            "legacy": true
          }
        ],
        "@babel/plugin-proposal-function-sent",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-throw-expressions",
        "@babel/plugin-transform-modules-commonjs"
      ]
    }
  }
}

更新日志

v0.3.5

terser-webpack-plugin插件替换uglifyjs-webpack-plugin

v0.3.6

terser插件配置