手动用webpack-chain 搭建移动端react环境

项目介绍

一个移动端web-app项目 基于webpack-chain（vue2.0的打包工具）

webpack-chain介绍

一个可以链式调用的webpack配置

webpack-config.js配置

const {
    merge } = require('webpack-merge')

const common = require('./config/common.js')
const dev = require('./config/dev')


module.exports = env => merge(common, dev)

通过webpack-merge合并生产模式和开发模式

配置入口出口

config
  // 修改 entry 配置
  .entry('index')
  .add(resolve('src/index.js'))
  .end()
  // 修改 output 配置
  .output
  .path(resolve('dist'))
  .filename('[name].bundle.js')
  .end()

移动端postcss.config.js设置

module.exports = {
   
    plugins: {
   
        // 'autoprefixer': {
   
        //     browsers: ['Android >= 4.0', 'iOS >= 7']
        // },
        'postcss-pxtorem': {
   
            rootValue: 37.5,
            unitPrecision: 3,
            propList: ['*'],
            exclude: '/node_modules'
        }
    }
}

配置html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

config.plugin('html')
  .use(HtmlWebpackPlugin, [
    {
   
      template: resolve('public/index.html'),
      filename: resolve('dist/index.html'),
      minify: true,
      inject: 'body',
      scriptLoading: 'blocking'
    }
  ])

配置其他plugin

new webpack.ProgressPlugin()
config.plugin('html')
  .use(HtmlWebpackPlugin, [
    {
   
      template: resolve('public/index.html'),
      filename: resolve('dist/index.html'),
      minify: true,
      inject: 'body'