@sweetui/sweet-mobile-sdk/config/webpack.config.base.js

/**
 * webpack base配置
 * Created by liuzhengdong on 2018/4/3.
 */
const webpack = require('webpack')
const path = require('path')
const fs = require('fs')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const appConfig = require(path.join(process.cwd(), 'app.config'))
const getVueLoaderConfig = require('./vue-loader.conf')
const vendorsManifest = require(path.join(process.cwd(), 'vendors-manifest.json'))
const vueLoaderPlugin = require('vue-loader/lib/plugin')
const merge = require('webpack-merge')

// H5离线缓存manifest
let manifest = ''

// 版本号
const appVersion = new Date().getTime()
const targetDir = path.join(process.cwd(), 'dist')

function resolve(dir) {
  return path.resolve(process.cwd(), dir)
}

// 网站图标
const favicon = path.join(process.cwd(), 'favicon.ico')

module.exports = function (env) {
  const cordova = appConfig.enableCordova ? 'cordova/index.js' : ''
  if (env === 'prod' && appConfig.offlineCaching) {
    manifest = `manifest=sweet.mobile.manifest`
    fs.writeFileSync(path.resolve(targetDir, `sweet.mobile.manifest`), '')
  }

  // 合并app.config.js的 webpack
  const config = merge(appConfig.webpack, {
    // 入口模块配置
    entry: appConfig.webpack.entry,
    // 输出模块配置
    output: {
      // 生成的文件名, [name] 即为entry配置中的key
      filename: '[name].js',
      // 异步模块文件名
      chunkFilename: '[id].js',
    },
    // 寻找模块时的一些缺省设置
    resolve: {
      // 补充扩展名
      extensions: ['.js', '.vue', '.json'],
      // 别名，可以直接使用别名来代表设定的路径以及其他
      alias: {
        'vue': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        '@cwd': resolve(''),
      }
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: [getVueLoaderConfig(env), 'eslint-loader'],
        },
        // 针对src和framework7-vue相关的npm包中的纯js进行编译
        {
          test: /\.js$/,
          include: [
            resolve('src'),
            resolve('./node_modules/framework7-vue'),
            resolve('./node_modules/framework7'),
            resolve('./node_modules/template7'),
            resolve('./node_modules/dom7')
          ],
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        },
        // 针对@sweetui下的所有模块进行编译
        {
          test: /\.(js|jsx)$/,
          include: resolve('./node_modules/@sweetui'),
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ["@babel/plugin-syntax-dynamic-import"]
          }
        },
        {
          test: /\.jsx$/,
          use: ['babel-loader', 'eslint-loader'],
          exclude: /node_modules/,
        },
        // 加载json文件
        {
          test: /\.json$/,
          include: [resolve('src'), resolve('lib'), resolve('client')],
          exclude: /node_modules/,
          use: 'json-loader',
        },
        {
          test: /\.ico$/,
          use: [{
            loader: 'url-loader',
            options: {
              limit: 1,
              name: 'resources/[path][name].[hash:8].[ext]',
            },
          }],
        },
        // gif|jpg|jpeg|png|bmp|svg|woff|woff2|eot|ttf这些模块使用url-loader加载
        {
          test: /\.(gif|jpg|jpeg|png|bmp|svg|woff|woff2|eot|ttf)(\?.*)?$/,
          use: [{
            loader: 'url-loader',
            options: {
              // 小于8912字节的文件,返回dataurl
              limit: 8912,
              // 生成的文件名,[name]为原始文件名,[hash:8]为根据文件内容生成8位md5值,[ext]为原始文件扩展名
              name: 'resources/[path][name].[hash:8].[ext]',
            },
          }],
        },
      ],
    },
    plugins: [
      // 由于mac不区分大小写，linux区分大小写，可能导致mac上正常，在部署时出错，所以强制区分大小写
      new CaseSensitivePathsPlugin(),
      // 读取HTML模板文件，并输出HTML文件，开发环境实际输出到内存中
      new HtmlWebpackPlugin({
        appVersion,
        favicon,
        manifest,
        filename: 'index.html',
        cordova: cordova,
        dllSrc: `${(env === 'prod' ? '' : '/dist/')}${vendorsManifest.name}.dll.js`,
        template: path.join(process.cwd(), 'index.template.ejs'),
        inject: true,
        minify: {
          removeComments: true,        //去注释
          collapseWhitespace: true,    //压缩空格
          removeAttributeQuotes: true  //去除属性引号
        },
      }),
      new webpack.DllReferencePlugin({
        context: path.join(process.cwd()),
        manifest: path.join(process.cwd(), 'vendors-manifest.json'),
      }),
      new webpack.DefinePlugin({
        'process.env': appConfig.definePlugin || {},
      }),
      // make sure to include the plugin for the magic
      new vueLoaderPlugin(),
    ],
  })
  return config
}