MinaWebpackPlugin — 支持 Webpack 4 的微信小程序編譯插件

MinaWebpackPlugin

MINA(微信小程序) Webpack 插件。 github.com/oranzhang/m…

因爲懶得配 Babel, 編譯環境的 Node.js 須要支持 async/await (即版本 >= 8)

概述

• 適用於 Webpack 4;
• 可以使用各類 pre-processors (e.g. Pug, Stylus, e.t.c.);
• 支持 Component 等新加入的特性;
• 自動合併依賴(使用 Webpack 的 SplitChunksPlugin);
• 暫不支持分包;
• 已在生產環境中測試並使用.

引入依賴

$ yarn add --dev mina-webpack-plugin
// or
$ npm install --dev mina-webpack-plugin
複製代碼

配置項

{
    basePath: null, // 源碼目錄相對路徑
    entryName: 'app', // app.js 的 entry 名
    entryChunkName: 'common', // 資源文件的 chunk 名, 不能爲空
    extensions: ['.js'], // 腳本部分擴展名, 使用時直接配置擴展名和 loader 便可
    assetExtensions: ['.wxml', '.wxss', '.pug', '.styl', '.scss'], // 樣式與模板部分擴展名, 使用時直接配置擴展名和 loader 便可
    vendorFilename: 'common.js' // 依賴合併後的文件名
  }
複製代碼

例子

const path = require('path')
  const webpack = require('webpack')

  const babelConfig = require('../.babelrc')
  const MinaWebpackPlugin = require('mina-webpack-plugin')

  function resolve (dir) {
    return path.join(__dirname, '..', dir)
  }

  module.exports = {
    entry: {
      app: './src/app.js'
    },
    optimization: {},
    plugins: [
      new MinaWebpackPlugin(),
      new webpack.LoaderOptionsPlugin({
        pugLoader: {
          locals: {
            basedir: path.resolve(__dirname, '../src') + '/'
          },
          pretty: true,
          debug: false,
          cache: true,
          basedir: path.resolve(__dirname, '../src') + '/'
        }
      })
    ].filter(function (e) { return e }),
    output: {
      path: resolve('dist'),
      filename: '[name].js',
      publicPath: '/',
      libraryTarget: 'commonjs2'
    },
    resolve: {
      modules: [
        'node_modules',
        path.resolve(__dirname, 'src'),
        'lib'
      ],
      extensions: ['.js', '.json', '.pug', '.styl', '.coffee'],
      alias: {
        '@': resolve('src')
      }
    },
    module: {
      rules: [
        {
          test: /\.(json)$/,
          include: /src/,
          use: [
            {
              loader: 'file-loader',
              options: {
                useRelativePath: true,
                name: '[name].[json]',
                context: resolve('src')
              }
            },
            {
              loader: 'raw-loader'
            }
          ]
        },
        {
          test: /\.js$/,
          include: [/src/, /lib/],
          loader: 'babel-loader',
          options: babelConfig
        },
        {
          test: /\.pug$/,
          include: /src/,
          use: [
            {
              loader: 'file-loader',
              options: {
                useRelativePath: true,
                name: '[name].wxml',
                context: resolve('src')
              }
            },
            {
              loader: 'wxml-loader'
            },
            {
              loader: 'pug-html-loader',
              options: {
                locals: {
                  basedir: path.resolve(__dirname, '../src')
                },
                data: {
                  strings: {}
                },
                pretty: true,
                debug: false,
                cache: true,
                basedir: path.resolve(__dirname, '../src')
              }
            }
          ]
        },
        {
          test: /\.styl$/,
          include: /src/,
          use: [
            {
              loader: 'file-loader',
              options: {
                useRelativePath: true,
                name: '[name].wxss',
                context: resolve('src')
              }
            },
            {
              loader: 'extract-loader'
            },
            {
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            {
              loader: 'stylus-loader'
            }
          ]
        },
        {
          test: /\.(jpe?g|png|svg)(\?.*)?$/,
          include: /src/,
          loader: 'file-loader',
          options: {
            name: 'images/[name].[hash:7].[ext]'
          }
        },
        {
          test: /\.(gif)(\?.*)?$/,
          include: /src/,
          loader: 'url-loader',
          options: {
            name: 'images/[name].[hash:7].[ext]'
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf|woff)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 100000,
            name: 'fonts/[name].[hash:7].[ext]'
          }
        }
      ]
    }
  }
複製代碼

受權

MIT

其餘

• 不爲任何使用本插件所形成的損失負責;
• 歡迎 contribute!